KnockoutJSを複数のページで使用する

Question

私はちょうどKnockoutJSの学習を始めます。私が混乱していることの1つは、サンプルがすべて1つのビューモデルで1つのビューに集中するように見えたことです。より大きなアプリケーションでは、どのように動作しますか？

純粋なhtml/jqueryアプリケーションを作成します。すべてのデータは、ajax経由でjsonとして提供されます。アプリケーションの上部には、複数のタブとサブタブがTwitter Bootstrapで実装されている共通のナビゲーションヘッダーがあります。

アプリケーションの各ページを別々のhtmlビューとjs viewmodelとして構築すると、単一の統合ヘッダをどのように維持できますか？これがサーバー側のasp.net webformsだった場合、私はこれにMaster Pagesを使用します。しかし、これはすべてクライアント側です。

これを処理するKnockoutには何かがありますか？あるいは、この特定の問題を解決する別のライブラリですか？

私は1つの大きなhtmlページでアプリを書くことができると思いますが、それはかなり大きいでしょう。より良い方法が必要です。

Answer 1

ビューモデルを別々にすることができます。 ko.applyBindingsメソッドでは、最初のパラメータはviewmodelですが、2番目のオプションのパラメータはそのビューモデルをバインドする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') 
); 
​ 

Answer 2

各タブのコンテンツは「1ページ」と言っていますか？

もしそうなら、jQuery.load（）を使って部分データを使ってデータを取り出すことができます。それから、各ページは独自のモデルを持ち、ヘッダーは影響を受けませんでしょうか？私はこれを明確にする必要があると思う。