Dynamically load views / templates in knockout.js

Question

I have a table and I want to show it in two different ways. Different number of columns and position of its content and cells. I would like to provide users with a way to change from one to another view by just clicking a button.

I started doing it by just using the visible binding, but then I realized it was not the proper way of doing it as the content was just invisible but it was still being loaded in the DOM. I was duplicating content in the background and generating invalid HTML (duplicate id attributes in both tables, for example) and that was generating problems in the jQuery side.

Then I took a look at the use of knockout templates to accomplish it as in this example, and it solves my previous problems and it works, but using HTML inside <script> tags doesn't sound like the cleanest solution to me.

I'm not quite sure if the use of components can provide any solution for this cases, I wasn't able to find one.

Any suggestions about how to deal with this problem?

Answer 1

Using knockout components + AMD is definitely what you're looking for. Take a look at this by Steve Sanderson, the author of knockout. It explains how to architect a SPA using ko with requirejs. It should clear your doubts

Example:

...
<div data-bind="component: myDynamicComponent"> </div>
...

Then, if you have your component loader configured to fetch its template & | or viewModel asynchronously you can have myDynamicComponent as an observable:

function RootViewModel(){
    var self = this;
    this.myDynamicComponent = ko.observable('some-component');

    this.someButtonClicked = function() { 
        self.myDynamicComponent('some-other-component'); // this should render your other component async (only if you configured your component loader to do so)
    }
}

Answer 2

Templates inside script tags are superseded by template tags. You might look at this recent answer I wrote for an example.

Update: Not all the Knockout component documentation has been updated, but it is here.

Another option is dynamically loading templates via AMD (require.js).