Discussions
Categories
- 196.9K All Categories
- 2.2K Data
- 239 Big Data Appliance
- 1.9K Data Science
- 450.3K Databases
- 221.7K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 550 MySQL Community Space
- 478 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3K ORDS, SODA & JSON in the Database
- 545 SQLcl
- 4K SQL Developer Data Modeler
- 187K SQL & PL/SQL
- 21.3K SQL Developer
- 295.9K Development
- 17 Developer Projects
- 138 Programming Languages
- 292.6K Development Tools
- 107 DevOps
- 3.1K QA/Testing
- 646K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 155 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.1K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 18 Java Essentials
- 160 Java 8 Questions
- 86K Java Programming
- 80 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 204 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 441 LiveLabs
- 38 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 171 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 232 Portuguese
Module Require Load Recipe: binding with exported class and its members?

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.
Best 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
Answers
-
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
- Can I avoid even the export = new FirstView() line?
- 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?
-
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