使用多页KnockoutJS(Using KnockoutJS with multiple page

我刚开始接触学习KnockoutJS。有一两件事，我感到困惑，样品似乎都集中在一个单一的视图模型的单一视图。如何做事情具有较大的应用吗？

我打算写一纯HTML / jQuery的应用。所有的数据都担任了为通过AJAX JSON。有在与Twitter的引导来实现多个标签和子选项卡的应用程序的顶部一般的导航头部。

如果我构建应用程序的每一页作为一个独立的HTML视图和js视图模型，我该如何保持一个统一的头？如果这是服务器端asp.net web表单，我会用母版页这一点。但是，这是所有客户端。

有东西在淘汰赛处理这个？或许，解决这个特殊问题的另一个库？

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

Answer 1:

你可以肯定有你的ViewModels分开。在ko.applyBindings方法中，第一参数是视图模型，但第二个可选参数是到该视图模型结合的DOM元素。

我没有在Twitter的引导仔细地看了看，但我设置的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')
);