具有挖空的動態模板

Question

我有一個viewmodel，其模板我想在應用程序狀態發生變化時在運行時動態更改。我提到了這個link ，同時提出了我的解決方案。

在我的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模板的計算的observable。

我的視圖模型是這樣的：

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

我改變作爲Ajax調用的結果模板的值被完成，我看到計算觀察到正確調用以及（我把警報在在那裏來驗證它），但是HTML中的綁定不會更新我的viewmodel的模板。任何幫助將不勝感激。

更新：我發現導致它不工作的錯誤。基本上我在包括knockout.js之前包含了jquery.tmpl插件。刪除jquery.tmpl取得了訣竅！

Answer 1

我沒有看到你的代碼有問題，除非它存在於你更新模板observable的部分，因爲AJAX調用的結果。確保你有一個對你的視圖模型的引用，並將其設置爲可觀察的vm.template(newValue);而不是重新創建觀察值。

這裏是你的代碼的工作：http://jsbin.com/ipijet/5/edit#javascript,html,live

有一點要注意的是，綁定已經是計算觀察到的範圍內執行，因此不需要你templateSelector函數中創建你自己的。

你可以簡單地創建直接返回像您觀察到的一個功能：

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

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

這裏是我寫了一段時間後關於這個主題的一篇文章：http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html