X

Geertjan's Blog

  • May 14, 2015

How to Separate HTML Templates in Knockout Apps

Geertjan Wielenga
Product Manager

A problem with the solution discussed in the recent YouTube clip about component-based Knockout.js development is that you end up with your HTML template embedded in your JavaScript file, as shown below:

From a tooling perspective, the above is suboptimal because you're not able to benefit from code completion and syntax coloring that an HTML editor provides. One approach would be to create an extension to NetBeans that would somehow recognize the above construct as being HTML (i.e., if a "template" binding is encountered, treat everything that follows as HTML), which is doable and something I'll take a look into (using this as a starting point). And here's the initial result of looking into this, i.e., compare the string in the pic above to the string in the pic below; in the lower pic notice the HTML syntax coloring:


However, in a real Knockout application, you're more likely to separate out your HTML into separate files, thus making it possible to hand those HTML files over to your front-end designers, while you continue working separately on the business logic in your JavaScript files.

Starting with this useful article on the Knockout site, I restructured the application discussed in the YouTube clip so that its HTML is now separated out from the JavaScript, which has as an added benefit that all the Knockout support features available out of the box in NetBeans are available to you:

To get to the above point, I followed various articles where 'requirejs' and 'requirejs-text' are described. My application now looks like this:

And here's my 'appViewModel.js', which still has some work to be done to it (which is discussed here), i.e., I need to use 'require.config', which is the next topic I'll be looking at. However, in the meantime, here's how things are set up to get to the above point:

define([
'../bower_components/knockout/dist/knockout',
'../bower_components/requirejs-text/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:
'../../requirejs-text/text!../../../../../files/user-template.html'}
});
};
});

The rest is the same as here. Finally, as in the YouTube clip, you use the above defined 'user' component in your 'index.html' as follows, again supported by code completion and other Knockout-friendly features in NetBeans:


Join the discussion

Comments ( 3 )
  • Kovica Friday, May 15, 2015

    Geertjan, I've seen in the last couple of months that you are using Dark Nimbus theme for NetBeans, so I decided to try it. I did. Then I tried Dark Metal. Then went back to plain Metal and then went on to IntelliJ IDEA Community, but not because it is better (I still use NetBeans for GUI work, Maven stuff, JAX-WS stuff, ...), but because it is mode pleasant to my eyes. I'm not a big fan of dark themes, but even Darcula look miles better than dark themes in NetBeans.

    I hope someday, I hope soon :), NetBeans team will also focus on GUI.


  • Geertjan Friday, May 15, 2015

    There's a lot more to an IDE than meets the eye. For example, good Maven integration: http://java.dzone.com/articles/my-experiences-maven-intellij

    I hope someday, I hope soon, you won't judge a book by its cover. :-)


  • Kovica Friday, May 15, 2015

    Agreed and I'm using it (NetBeans) for a lot of stuff. I'd just like to see it look better. :)


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