Question

我在一个页面中有一个viewmodel有2个标签，当页面加载viewmodel被绑定时，当我点击第二个标签时我使用ajax.load加载内容但是在这个页面中我想使用viewmodel定义在包含选项卡的页面中，是否可能？

Answer 1

简短 - ＆＃39;是的，这是可能的！＆＃39;。实施示例：

var yourFirstTabViewModel = {
    name: ko.observable("John")
}

var yourSecondTabViewModel = {
    someCounter:ko.observable(100)
}


var mainViewModel = {
     changeTab : function(tabIndex) {
         if (tabIndex == 0) {
             $("#tabsContentContainer").load("youPageTabTemplate", function() {
                 ko.applyBindingsToDescendants(yourFirstTabViewModel, $("#tabsContentContainer")[0]);
             });
         } else {
             $("#tabsContentContainer").load("youPageTabTemplate2", function () {
                 ko.applyBindingsToDescendants(yourSecondTabViewModel, $("#tabsContentContainer")[0]);
             });
         }
     }
}

ko.applyBindings(mainViewModel, $("#tabsContainer")[0])

和你的标记：

<div id="tabsContainer">
  <button data-bind="click:changetab.bind($data, 0)">First tab</button>
  <button data-bind="click:changetab.bind($data, 1)">Second tab</button>
  <div id="tabsContentContainer"></div>
</div>

这会奏效，但不是淘汰方式！您应该考虑使用template敲除绑定而不是ajax.load()。您可以在淘汰网站上找到有关template绑定的信息： http://knockoutjs.com/documentation/template-binding.html

另外，您可以查看knockout-amd-helpers，它仅在您需要使用require.js时加载模板/视图模型。这是网站： https://github.com/rniemeyer/knockout-amd-helpers

Knockout - ajax.load页面的一个视图模型

1 个答案: