4

我刚刚开始学习 KnockoutJS。我感到困惑的一件事是，样本似乎都集中在具有单个视图模型的单个视图上。大型应用程序如何工作？

我将编写一个纯 html/jquery 应用程序。所有数据都通过 ajax 以 json 格式提供。应用程序顶部有一个通用导航标题，其中包含多个选项卡和子选项卡，这些选项卡和子选项卡使用 Twitter Bootstrap 实现。

如果我将应用程序的每个页面构建为单独的 html 视图和 js 视图模型，我如何维护一个统一的标头？如果这是服务器端的 asp.net 网络表单，我会为此使用母版页。但这都是客户端。

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

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

4

2 回答 2

6

您绝对可以将您的视图模型分开。在该ko.applyBindings方法中，第一个参数是视图模型，但第二个可选参数是要绑定该视图模型的 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')
);
​
于 2012-04-26T20:27:55.417 回答
0

您是说每个选项卡的内容都是“单页”吗？

如果是这样，您可以使用 jQuery.load() 来使用部分数据来拉取数据。那么每个页面都会有自己的模型，并且标题不会受到影响，不是吗？我想这需要澄清一下。

于 2012-04-26T01:36:02.270 回答