将KnockoutJS与多个页面一起使用

我刚开始学习KnockoutJS。 有一点我很困惑，样本似乎都集中在一个具有单一视图模型的视图上。 如何处理更大的应用程序？

我将编写一个纯html / jquery应用程序。 所有数据都通过ajax作为json提供。 应用程序顶部有一个公共导航标题，其中有多个标签和子标签通过Twitter Bootstrap实现。

如果我将应用程序的每个页面构建为单独的html视图和js viewmodel，我该如何维护单个统一标头？ 如果这是服务器端的asp.net webforms，我会使用Master Pages。 但这都是客户端。

Knockout中有什么东西可以解决这个问题吗？ 或者也许是另一个解决这个问题的图书馆？

我想我可以在一个大的html页面中编写应用程序，但它会相当大。 一定有更好的方法。

Answer 1

你可以肯定地将你的视图模型分开。 在ko.applyBindings方法中，第一个参数是viewmodel，但第二个可选参数是将该视图模型绑定到的dom元素。

我没有密切关注Twitter Bootstrap，但是我设置了jsfiddle应该会让你失望： http ： //jsfiddle.net/JasonMore/ygT6v/10/

视图

 
 
 
 
 
 
Hey, , what are you doing?
 
First: 
 
Last: 
 
 
 
 
You live at: 
  

使用Javascript

 // main.js var menuViewModel = { options: ko.observableArray([ { option: 'person'}, { option: 'address'} ]) }; ko.applyBindings( menuViewModel, document.getElementById('menu') ); // person.js var personViewModel = new function() { var self = this; this.firstName = ko.observable('John'); this.lastName = ko.observable('Doe'); this.fullName = ko.computed(function() { return self.firstName() + ' ' + self.lastName(); }); }; ko.applyBindings( personViewModel, document.getElementById('person') ); // address.js var addressViewModel = new function() { var self = this; this.address = ko.observable('123 main'); this.city = ko.observable('Smallville'); this.state = ko.observable('TX'); this.zip = ko.observable('12345'); this.fullAddress = ko.computed(function() { return self.address() + ' ' + self.city() + ' ' + self.state() + ' ' + self.zip(); }); }; ko.applyBindings( addressViewModel, document.getElementById('address') );​ 

Answer 2

您是说每个标签的内容是“单页”吗？

如果是这样，你可以使用partials来使用jQuery.load（）来提取数据。 然后每个页面都有自己的模型，标题不会受到影响，不是吗？ 我想这需要澄清。