2

ビューが1 つしかない場合、Knockout.js を使用する方法は非常に明確です。

互いに独立した複数のビューがある場合、アプリケーションをどのように構築すればよいですか? ビューごとにビュー モデルが必要だと想像できますが (もちろん、これはビューモデルの意味なので)、HTML ファイルをコンポーネントに分割するにはどうすればよいでしょうか?

たとえば、ビューを定義するために HTML スニペットをそれぞれ独自のファイルに入れたいのですが、index.htmlこれらのビューを追加する場所のプレースホルダーしかありません。

Knockout.js がこれをサポートしていないとは想像できませんが、これまでに見つけたすべての例は、常に 1 つのビューにすぎませんでした ( TodoMVCのサンプルのように)。

1 つの大きな HTML ファイルをビューごとに 1 つずつ複数のファイルに分割し、Knockout.js を使用してそれらを結合するにはどうすればよいですか?

4

1 に答える 1

3

ああ、それは簡単です。applyBindingsKnockout JS のメソッドは、オプションの DOM 要素を 2 番目のパラメーターとして受け入れます。したがって、あなたの場合、次のようなことができます：

ko.applyBindings(myViewModel, 
    document.getElementById('myModuleWrapperDiv'));
ko.applyBindings(otherViewModel, 
    document.getElementById('otherModuleWrapperDiv'));

唯一の問題は、1 つの DOM サブツリーで 2 つのビュー モデルのバインディングを組み合わせて一致させることができないことです。たとえば、次のマークアップが機能します。

<div id="myModuleWrapperDiv">
    ...
</div>
<div id="otherModuleWrapperDiv">
    ...
</div>

ただし、これは次のことにはなりません。

<div id="myModuleWrapperDiv">
    ...
    <div id="otherModuleWrapperDiv">
        ...
    </div>
</div>

Knockout でウィジェットを作成する方法を次に示します。95% のケースでは、単純にテンプレートを読み込んでバインディングを適用するだけで問題ないことに注意してください。ただし、パッケージ化されたウィジェット (つまり、別のコンポーネントとしてリリースするもの) が必要な場合は、それをカスタム バインディングでラップするのが最善の方法です。Angular JS は、そのディレクティブで同様のアプローチを推進しています。

  1. ウィジェットのマークアップをドキュメント フラグメントとして設計します。HTML の簡単なビット、divすべてのレンダリングと対話が JavaScript で行われるプレースホルダーなど、好きなように実行できます。

  2. テンプレートのビュー モデルを設計します。ウィジェットがそれに従ってモデルをレンダリングおよび操作し、構築するために必要となる可能性のあるデータを考えてみてください。

  3. ウィジェットのカスタム バインディングを作成します。最も簡単なのは、プレースホルダーdiv要素に配置することです。

    を。メソッドinitはテンプレートをロードし、内部ウィジェット ビュー モデルのバインディングをテンプレートに適用する必要があります。バインディングが適用された後、結果のドキュメント フラグメントをプレースホルダーに追加できますdiv。

    b. update メソッドは、カスタム バインディング属性パラメーターを介して提供される値に基づいて、内部ビュー モデルの状態を変更する必要があります。

于 2013-03-16T09:54:17.573 に答える