1

基本的に、「テンプレート」データバインディングを使用するRobNの非常に単純なテンプレートスイッチャーhttp://jsfiddle.net/rniemeyer/XYz8M/を実装しようとしています。

   (---SO wants code here - see fiddle for complete code---)
   <div id="templateContent" data-bind='template: { name: currentView() }'></div>

   var viewModel = {
      currentView: ko.observable("template-1"),
      toggleView: function() {
       this.currentView(this.currentView() === "template-1" ? "template-2" : "template-1");   
     }
  };

  ko.applyBindings(viewModel);

これを行う他の多くの単純な例を見てきましたが、すべてがロードされたテンプレートごとに同じ viewModel クラスを使用しています。例外 - RobN の SamplePresentation アプリ (別のリンクを投稿するのに十分な担当者ポイントがありません)。彼は section.activate() メソッドでこれを行っていると思いますが、私には不明です。

この概念を実際のアプリで使用したいのですが、バインディング コンテキストの問題があります。これが私がやろうとしていることです: http://jsfiddle.net/jockor/DSEDh/4/

   This line intentionally left blank (please see fiddle vs. mangling code here)

基本的に、ナビゲーション リンク/ボタンが押されたときに、本文のコンテンツ パネルを別のテンプレートと交換したいだけです。そのテンプレートには、独自の viewModel に基づく独自のデータが必要です。

上記のフィドルは、この概念の単純化されたバージョンでの私の目的です。猫と犬のパネルを切り替えようとしているだけです。私が遭遇したのは、「テンプレート」データバインドにバインドされたデータが、ロードされた猫/犬のテンプレートに使用されていることです。

これを正しく行っているのか、それとも「テンプレート」バインディングの概念を悪用しているのか、誰か教えてもらえますか?

4

1 に答える 1

1

jsfiddle が機能するように変更しました。

http://jsfiddle.net/5rmAL/2/

必要なのはdata、テンプレート バインディングのフィールドも切り替えることでした。テンプレート名を切り替えただけで、コードから、ビュー モデル データも変更する方法を探していることがわかりました。そこで、名前を切り替えるとviewModelからviewModelにデータが切り替わるようにざっくり実装しました。これを行うにはもっと洗練された方法がありますが、jsfiddle はデモンストレーション用にすぎません。

を変更することにより、dataテンプレートが指すものを変更して、そのデータを取得できます。それをオブザーバブルにすることで、スイッチを指し示すデータを持つことができました。上記の簡単な大まかな実装では、テンプレート名とオブザーバブル内のデータの両方を保持する単純なオブジェクトを使用します。テンプレートの名前とデータは同時に切り替える必要があるため、オブザーバブル内のオブジェクトの値を更新し、値が変更されたことをオブザーバブルに手動で伝えます。テンプレートの名前の前のデータを変更すると、以前のテンプレートをバインドしようとします。同様に、データの前に名前を変更すると、古いデータを新しいテンプレートにバインドしようとします。したがって、テンプレートを再バインドするときに変数やものが見つからないことについて爆発することなくこれを行うには、何らかの方法でそれを確認する必要がありますtemplateテンプレートの名前とポイントするデータの両方の変更が完了するまで、バインディングは更新されません。

編集: $data を関数の最初の引数として渡すノックアウト バインディングに関数ハンドラーがあることに気付きました。Knockout は常に最初に $data を関数の最初の引数として渡すので、yourfunction () { ....goto($data); }を....goto(... = stuff) に置き換えました。これは一種のサイド ノードです (関数シグネチャを変更する必要さえありませんでした)。

于 2013-04-25T16:08:11.627 に答える