4

アプリケーションの状態が変化したときに、実行時にテンプレートを動的に変更したいビューモデルがあります。解決策を考え出す際に、このリンクを参照 しました。

私のhtmlページには、ビューモデルのリストにバインドされたdivがあります:

<div class="app" 
     data-bind="template: {name: templateSelector, foreach: viewModelBackStack}">
</div>

そして、私の templateSelector メソッドは次のようになります。

this.templateSelector = function(viewModel)
{
    if (!_itemTemplate)
    {           
      _itemTemplate = ko.computed(function() {return this.template();}, viewModel);
    }

    return _itemTemplate();
}

var _itemTemplate;

ご覧のとおり、viewModel のテンプレートを返す計算されたオブザーバブルを構築しています。

私のビューモデルは次のようになります。

function MyViewModel
{
    this.template = ko.observable("MyTemplate");
}

ajax呼び出しが完了した結果としてテンプレートの値を変更していますが、計算されたオブザーバブルも正しく呼び出されていることがわかります（確認するためにそこにアラートを配置しました）が、htmlのバインディングはテンプレートを更新しません私のビューモデル。どんな助けでも大歓迎です。

更新: 動作しない原因となっているバグを見つけました。基本的に、knockout.js を含める前に jquery.tmpl プラグインを含めていました。jquery.tmpl を削除するとうまくいきました。

4

1 に答える 1

3

AJAX 呼び出しの結果として観測可能なテンプレートを更新する部分に問題がない限り、コードに問題はありません。ビューモデルへの参照があり、それをオブザーバブルとして設定し、オブザーバブルを再作成していないことを確認してくださいvm.template(newValue);。

これがあなたのコードの働きです: http://jsbin.com/ipijet/5/edit#javascript,html,live

注意すべきことの 1 つは、バインドは計算されたオブザーバブルのコンテキスト内で既に実行されているため、templateSelector関数内で独自に作成する必要がないことです。

次のように、オブザーバブルを直接返す関数を簡単に作成できます。

this.getTemplate = function(data) {
   return data.template();
};

http://jsbin.com/ipijet/3/edit#javascript,html,live

このトピックについてしばらく前に書いた記事を次に示します。

于 2012-07-17T15:26:00.000 に答える