在KnockoutJS中動態更換模板

在KnockoutJS中動態更換模板

NOTE:
本文來源 Dynamically Changing Templates in KnockoutJS - Knock Me Out
由 赤石俊哉 翻譯整理。

在KnockoutJS的1.12版本以後新增了一個頗有趣也頗有用的特性，那就是能夠爲template綁定的模板名稱傳遞一個函數。這樣的話，就方便了：

• 容許你基於你的視圖模型狀態來動態渲染一個部分

• 在一個foreach條件裏面，容許你使用不一樣的模板渲染數組中的每一個獨立的項目。

• 讓你在不須要過多在乎條件邏輯的狀況下，使每種狀況的模板簡短且可複用。

舉一個簡單的場景來講，你可能但願一個用戶能夠在摘要和詳細兩種顯示文章的方式之間切換。
咱們的視圖模型能夠是這樣的：

var viewModel = {
    articles: [{
        id: 1,
        title: "Article One",
        content: "Content for article one."},
    {
        id: 2,
        title: "Article Two",
        content: "Content for article two."},
    {
        id: 3,
        title: "Article Three",
        content: "Content for article three."}
                                               ],
    selectedView: ko.observable("summary"),
    selectedArticle: ko.observable()
};

在咱們的數據綁定中，咱們設置selectedView爲可觀測的，而且是基於一些單選框的。模板的名字指定再也不是一個字符串，而是能夠用selectedView來綁定的。
Note: 咱們返回一個匿名函數，由於直接爲一個可觀測的變量設置的綁定，只會在咱們不給這個模板綁定傳遞選項做爲對象遍歷的時候才生效。咱們必需要將foreach或者data傳遞給這個綁定。

<input type="radio" name="choices" value="summary" data-bind="checked: selectedView" />Summary
<input type="radio" name="choices" value="details" data-bind="checked: selectedView" />Details
<div data-bind="template: { name: function() { return selectedView(); }, foreach: articles }"></div>

如今，咱們能夠簡單的在summary和details兩個模式之間切換了。一般來講，在咱們可使用一個擁有條件邏輯的模板爲每個視圖以前，咱們須要使用visible綁定來隱藏一個或者多個。
當咱們開始基於在數組中的每個項目所關聯的事實變換模板的時候，事情就變得又去了。有可能咱們還會加入一個edit模式用一個可觀測的變量來跟蹤選擇的文章。
而後，咱們的邏輯可能會變得愈來愈複雜，讓咱們添加一個用來判斷該使用哪一個模板的方法吧。

viewModel.selectedArticle = ko.observable();
viewModel.templateToUse = function(item) {
    return item === this.selectedArticle() ? ‘edit’ : this.selectedView();
}.bind(viewModel);

注意，這個方法使用數據項目做爲第一個參數。Knockout從foreach的循環中向這個方法傳遞當前的項目。咱們的綁定就像這樣了：

<div data-bind="template: { name: templateToUse, foreach: articles }"></div>

如今，這個文章能夠動態地顯示summary，detail以及根據狀況顯示edit。