X

Geertjan's Blog

  • May 15, 2015

require.config with Knockout in NetBeans

Geertjan Wielenga
Product Manager

The application structure discussed yesterday is as follows:


Thanks to require.config, here's a significantly cleaned up version of the code discussed yesterday in 'init.js':

require.config({
baseUrl: './',
paths: {
knockout: './bower_components/knockout/dist/knockout',
text: './bower_components/requirejs-text/text',
appViewModel : './scripts/appViewModel'
},
waitSeconds: 2
});
require(['knockout', 'appViewModel', 'text'],
function (ko, appViewModel) {
ko.applyBindings(new appViewModel());
}
);

Putting the above together was simplified via the code completion and documentation in NetBeans:

What's also pretty handy is that you can see all the available configurations when you call up code completion before the start of a word within a 'require.config' block:


And here's the 'appViewModel', also significantly cleaned up, thanks to the 'require.config' in the 'init.js' above:

define([
'knockout',
'text'
],
function (ko) {
return function appViewModel() {
ko.components.register("user", {
viewModel: function (params) {
this.firstName = ko.observable(params.firstName);
this.lastName = ko.observable(params.lastName);
this.fullName = ko.pureComputed(function () {
return this.firstName() + " " + this.lastName();
}, this);
},
template: {require:
'text!files/user-template.html'}
});
};
});

Again, notice the editor support below, not only syntax coloring, but when you hold down the Ctrl key and move your mouse over the file reference in the 'text' binding, in line 16 below, the reference becomes a hyperlink, which can be clicked to open the related file.


As shown yesterday, the final step of this scenario is to actually make use of the 'user' component in the view, where again NetBeans has helpful code completion to support you:

The application is modulerized and wired together via RequireJS, with its 'data-main' attribute, e.g., in the 'index.html', where the above is found, there is also the below, providing the entry point into the application, which is the 'init.js' file with which this blog entry started:


More on RequireJS (sorry for the poor audio): https://www.youtube.com/watch?v=v4jnTWFihMU

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.