4

KnockoutJS の学習を始めたばかりです。私が混乱していることの 1 つは、サンプルはすべて、単一のビューモデルを持つ単一のビューに焦点を当てているように見えたことです。大規模なアプリケーションではどのように機能しますか?

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

アプリケーションの各ページを個別の html ビューと js ビューモデルとして構築する場合、単一の統合ヘッダーを維持するにはどうすればよいですか? これがサーバー側の asp.net Web フォームである場合、これにはマスター ページを使用します。しかし、これはすべてクライアント側です。

Knockout でこれを処理するものはありますか? それとも、この特定の問題を解決する別のライブラリでしょうか?

アプリを 1 つの大きな html ページに記述できると思いますが、かなり大きくなります。もっと良い方法があるはずです。

4

2 に答える 2

6

ビューモデルを分離することは間違いありません。このko.applyBindingsメソッドでは、最初のパラメーターはビューモデルですが、2 番目のオプションのパラメーターはそのビュー モデルをバインドする dom 要素です。

私は Twitter Bootstrap を詳しく見ていませんが、私は jsfiddle をセットアップしました 。

意見

<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 に答える