Question

I have a viewmodel whose template I want to change dynamically at runtime when the state of my application changes. I referred to this link
while coming up with my solution.

In my html page I have a div that is bound to a list of view models:

<div class="app" 
     data-bind="template: {name: templateSelector, foreach: viewModelBackStack}">
</div>

And my templateSelector method looks like this:

this.templateSelector = function(viewModel)
{
    if (!_itemTemplate)
    {           
      _itemTemplate = ko.computed(function() {return this.template();}, viewModel);
    }

    return _itemTemplate();
}

var _itemTemplate;

As can be seen, I am constructing a computed observable which returns viewModel’s template.

My viewModel looks like this:

function MyViewModel
{
    this.template = ko.observable("MyTemplate");
}

I am changing the value of template as a result of an ajax call being completed and I see that computed observable is called correctly as well (I placed an alert in there to verify it), however the bindings in html does not update the template of my viewmodel. Any help will be appreciated.

UPDATE: I found the bug that was causing it not to work. Basically I was including jquery.tmpl plugin before including knockout.js. Removing jquery.tmpl did the trick !

Answer 1

I don’t see a problem with your code, unless it lies in the part where you update the template observable as the result of an AJAX call. Make sure that you have a reference to your view model and are setting it as an observable vm.template(newValue); and not recreating the observable.

Here is your code working: http://jsbin.com/ipijet/5/edit#javascript,html,live

One thing to note is that bindings are already executed within the context of a computed observable, so it is unnecessary to create your own within your templateSelector function.

You can simply create a function that returns your observable directly like:

this.getTemplate = function(data) {
   return data.template();
};

http://jsbin.com/ipijet/3/edit#javascript,html,live

Here is an article that I wrote a while back on this topic: http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html