3

これが私のマークアップです：

<section id="Application">
    <!-- ko ifnot: initialized -->
    <span>Loading...</span>
    <!-- /ko -->
    <ul data-bind="template:{name: 'clientList', foreach:clients}">
    </ul>

    <ul data-bind="template:{name: 'storyList', foreach:stories}">
    </ul>
</section>

これが私のテンプレートです（それらは別々のファイルにあります）：

function IncompleteStoriesViewModel() {
//data
var self = this;
self.initialized = ko.observable(false);
self.stories = ko.observableArray();
(function () {
    $.ajax({
        url: lucidServer.getIncompleteStory(1),
        success: function (data) {
            ko.mapping.fromJS(data, {}, self.stories);
            self.initialized(true);
        }
    });
})();
};

ko.applyBindings(new IncompleteStoriesViewModel());


function ClientViewModel() {
//data
var self = this;
self.initialized = ko.observable(false);
self.clients = ko.observableArray();
(function () {
    $.ajax({
        url: lucidServer.getClients(1),
        success: function (data) {
            ko.mapping.fromJS(data, {}, self.clients);
            self.initialized(true);
        }
    });
})();
};

ko.applyBindings(new ClientViewModel());

私のテンプレートファイルは問題ありません。htmlでどちらか一方を呼び出すと、それぞれが個別に機能しますが、両方を表示しようとすると、最初のファイルのみがレンダリングされ、2番目のファイルはエラーをスローします。が定義されていません'または'クライアントが定義されていません'

私はこれを別の方法で実行する必要があると確信しています。方法がわかりません。私の目標は、同じページに異なるテンプレートをレンダリングする最大10〜15のビューモデルを用意することです。

4

2 に答える 2

4

すべてのビューモデルを含むビューモデルを作成する必要があります。

function ViewModel(){
    var self = this;

    self.clientViewModel = new ClientViewModel();
    self.storyViewModel = new IncompleteStoriesViewModel();
}

次に、ページ全体にバインディングを適用します。

ko.applyBindings(new ViewModel());

そしてそれに応じてhtmlを調整します：

<section id="Application">
    <ul data-bind="template:{name: 'clientList', foreach: clientViewModel.clients}">
    </ul>

    <ul data-bind="template:{name: 'storyList', foreach:storyViewModel.stories}">
    </ul>
</section>
于 2012-10-30T19:36:21.857 に答える
3

Artemの答えはおそらくより良い方法ですが、別の選択肢があります。2番目のパラメーターを呼び出しapplyBindingsて使用し、ターゲットとする要素を指定できます。

ko.applyBindings(viewModelA, document.getElementById("one"));
ko.applyBindings(viewModelB, document.getElementById("two"));

これにより、複数のビューモデルをページにバインドできます。

于 2012-10-30T19:48:46.840 に答える