knockoutjs nested views dynamically loaded

Question

is there something like knockout.refresh bindings?

I am attempting to have a main.htm, myview.htm

main.htm has a pageviewmodel with a observable currentviewmodel.

main.htm:

<div id="page">
   <div data-bind="html:CurrentViewModel().Render"> </div>
</div>

with a script block

  var appViewModel = function(){
       var self = this;
       self.CurrentViewModel = ko.observable({Render:function(){return '';}});
       return self;
    };
    var myViewModel = function(){
       var self = this;
       self.Render = ko.observable('');
       self.Name = ko.observable('blah');
       self.Load = function(){
          $.get('views/myview.htm', function(data) {
             var res = data;
             self.Render(res);
             self.Name('blldjkfa');
          },"html");
       };
       return self;
    };

var pagemodel = new appViewModel(); ko.applyBindings(pagemodel,$('#page')[0]);

myView.htm:

<div>
hello world <span data-bind="text:Name">a</span>
</div>

at some point the current view model gets set

var loadedModel = new mainViewModel();
pagemodel.CurrentViewModel(loadedModel);
loadedModel.Load();

when load gets called the html of the site is populated but the data-bind is not applied. however if i put a span with the same a into the block it does display the data from the new view model.

...Leading me to believe that i need to refresh the binding somehow... that or set html differently?

Milimetric Milimetric · Accepted Answer · 2012-03-15T02:44:21

Yep, you just call applyBindings with these parameters:

ko.applyBindings(yourModel, HTMLElement);

where HTMLElement is something like $('#yourElementId')[0] if you're using jQuery. Knockout applies bindings starting with that element as the root. You can read more about applyBindings here: http://knockoutjs.com/documentation/observables.html under the "Activating knockout" section. Good luck.

knockoutjs nested views dynamically loaded

1 Answers