多页使用KnockoutJS

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

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

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

Knockout中是否有处理这个问题的东西？或者可能是另一个解决这个问题的库？

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

来源

2012-04-26 Matt Johnson

你有没有想过你的问题的答案？ – 2012-05-01 15:11:22

还没有。必须搁置一下。感谢您的洞察力。 – 2012-05-01 17:34:10

@Jason - 最终我找到了[DurandalJS]（http://durandaljs.com/）框架，其中包含我正在寻找的缺失部分。 – 2013-06-24 04:04:17

你可以明确地让你的viewmodels分开。在ko.applyBindings方法中，第一个参数是viewmodel，但第二个可选参数是将该视图模型绑定到的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') 
);

来源

2012-04-26 20:27:55

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

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

来源

2012-04-26 01:36:02 brightgarden

多页使用KnockoutJS

回答

相关问题