Forum Stats

  • 3,826,880 Users
  • 2,260,721 Discussions
  • 7,897,109 Comments

Discussions

Categories

Module Require Load Recipe: binding with exported class and its members?

Venkata Rahul S
Venkata Rahul S Member Posts: 37 Blue Ribbon
in Oracle JET

I am referring to the Require Load recipe in the cookbook here

All the three modules here refer to their respective typescript exports, in their oj-bind-text value bindings.

Now if I had a class FirstView in the first module. how would I "marry" that to the view binding declarations? In other words, from the default instance of a class named FirstView in my viewModel class, I want to refer to say a string greeting.

How can I pass this FirstView reference in the following line:

<oj-bind-text value=[[FirestView.greeting]]/>

or

<oj-bind-text value=[[greeting]]/> ?

My FirstView.ts file, which is the viewModel in my moduleConfig is:

class FirstView{

greeting:ko.Observable<string> = ko.observable("Hello");

}

export new FirstView() as firstView();

Sub question:

When I declare the moduleCOnfig binding as done in the above recipe, is the FirstView class instantiated also? What I saw was that static lines are executed but the class itself is not instantiated unless the export new instance was specifically done.

Also, does the moduleConfig binding in this recipe automatically take care of executing the Promise and its callback (if any)?

Please help.

Tagged:
· Share on TwitterShare on Facebook

Best Answer

  • Venkata Rahul S
    Venkata Rahul S Member Posts: 37 Blue Ribbon
    Answer ✓

    This is the final way to do it:

    The FirstView class alons needs to be exported.

    export = ViewModel;

    The module Config creation part takes cre of the instantiation with the parameters. The cookbook does not have a direct example for this, but the documentation of the ModuleElementUtils. lays this down clearly right at the start.

    Here is the way to create the moduleConfig:

    this.ModuleConfig = Promise.all(

    [

    moduleElementUtils.createView({ "viewPath": "path to the view" }),

    moduleElementUtils.createViewModel({ "viewModelPath": "path to the viewModel", "params": detail.invokeParams, "initialize": "ifParams" }),

    //detail and invokeParams originate from a CustomEvent and is a k-vy-value pair

    ]

    ).then(function (values) {

    return { "view": values[0], "viewModel": values[1] };

    }

    , function (reason) {

    console.log(reason);

    }

    );

    I am doing this non-default way of providing viewPath and viewModelPath because the default assumes that all views line in a views Directory and all viewModels lie in a viewModel directory. Not something I really like. The component way with all assets for the module being under one directory is what suits e better.

    This code goes into the constructor or the method, of whichever class the module is being loaded in.

    One problem with the approach seems to be that it will not be easy to debug this new viewModel.ts file using firefox web developer edition

    · Share on TwitterShare on Facebook

Answers

  • Venkata Rahul S
    Venkata Rahul S Member Posts: 37 Blue Ribbon

    Solved this. The export line needs to be simple:

    export = new FirstView();

    And the binding element is

    <oj-bind-text value="[[greeting]]"/>

    An alternative is

    export = {firstView: new FirstView()}

    in which case the bind tag needs a small addition:

    <oj-bind-text value="[[firstView.greeting]]"/>

    I suspect this could be extrapolated to any number of instances of classes.

    What I am yet to figure out is

    1. Can I avoid even the export = new FirstView() line?
    2. How can I parametrize the constructor? When I create the moduleConfig, I can provide some params. How will I need to combine them with the above exports?
    · Share on TwitterShare on Facebook
  • Venkata Rahul S
    Venkata Rahul S Member Posts: 37 Blue Ribbon
    Answer ✓

    This is the final way to do it:

    The FirstView class alons needs to be exported.

    export = ViewModel;

    The module Config creation part takes cre of the instantiation with the parameters. The cookbook does not have a direct example for this, but the documentation of the ModuleElementUtils. lays this down clearly right at the start.

    Here is the way to create the moduleConfig:

    this.ModuleConfig = Promise.all(

    [

    moduleElementUtils.createView({ "viewPath": "path to the view" }),

    moduleElementUtils.createViewModel({ "viewModelPath": "path to the viewModel", "params": detail.invokeParams, "initialize": "ifParams" }),

    //detail and invokeParams originate from a CustomEvent and is a k-vy-value pair

    ]

    ).then(function (values) {

    return { "view": values[0], "viewModel": values[1] };

    }

    , function (reason) {

    console.log(reason);

    }

    );

    I am doing this non-default way of providing viewPath and viewModelPath because the default assumes that all views line in a views Directory and all viewModels lie in a viewModel directory. Not something I really like. The component way with all assets for the module being under one directory is what suits e better.

    This code goes into the constructor or the method, of whichever class the module is being loaded in.

    One problem with the approach seems to be that it will not be easy to debug this new viewModel.ts file using firefox web developer edition

    · Share on TwitterShare on Facebook