jquery – 将KnockoutJS与多个页面一起使用

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

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

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

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

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

解决方法

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

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

视图

<ul id="menu" data-bind="foreach:options">
    <li data-bind="text:option"></li>
</ul>
<br/>
<section id="person"> 
    <p>hey,<span data-bind="text:fullName"></span>,what are you doing?</p>
    <p><label>First: <input type="text" data-bind="value:firstName" /></label></p>
    <p><label>Last: <input type="text" data-bind="value:lastName" /></label></p>
</section >
<br />
<section id="address"> 
    <p>You live at: <span data-bind="text:fullAddress "></span></p>
</section >

使用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')
);
​