在KnockoutJS中動(dòng)態(tài)更換模板

617035918 發(fā)布于2019-08-20 18:10 / 1299人閱讀

摘要：在中動(dòng)態(tài)更換模板本文來源由赤石俊哉翻譯整理。當(dāng)我們開始基于在數(shù)組中的每一個(gè)項(xiàng)目所關(guān)聯(lián)的事實(shí)變換模板的時(shí)候，事情就變得又去了。我們的綁定就像這樣了現(xiàn)在，這個(gè)文章可以動(dòng)態(tài)地顯示，以及根據(jù)情況顯示。

在KnockoutJS中動(dòng)態(tài)更換模板

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

在KnockoutJS的1.12版本之后新增了一個(gè)很有趣也很有用的特性，那就是可以為template綁定的模板名稱傳遞一個(gè)函數(shù)。這樣的話，就方便了：

允許你基于你的視圖模型狀態(tài)來動(dòng)態(tài)渲染一個(gè)部分

在一個(gè)foreach條件里面，允許你使用不同的模板渲染數(shù)組中的每個(gè)獨(dú)立的項(xiàng)目。

讓你在不需要過多在意條件邏輯的情況下，使每種情況的模板簡(jiǎn)短且可復(fù)用。

舉一個(gè)簡(jiǎn)單的場(chǎng)景來說，你可能希望一個(gè)用戶可以在摘要和詳細(xì)兩種顯示文章的方式之間切換。
我們的視圖模型可以是這樣的：

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()
};

在我們的數(shù)據(jù)綁定中，我們?cè)O(shè)置selectedView為可觀測(cè)的，并且是基于一些單選框的。模板的名字指定不再是一個(gè)字符串，而是可以用selectedView來綁定的。
Note: 我們返回一個(gè)匿名函數(shù)，因?yàn)橹苯訛橐粋€(gè)可觀測(cè)的變量設(shè)置的綁定，只會(huì)在我們不給這個(gè)模板綁定傳遞選項(xiàng)作為對(duì)象遍歷的時(shí)候才生效。我們必須要將foreach或者data傳遞給這個(gè)綁定。

Summary
Details

現(xiàn)在，我們可以簡(jiǎn)單的在summary和details兩個(gè)模式之間切換了。通常來說，在我們可以使用一個(gè)擁有條件邏輯的模板為每一個(gè)視圖之前，我們需要使用visible綁定來隱藏一個(gè)或者多個(gè)。
當(dāng)我們開始基于在數(shù)組中的每一個(gè)項(xiàng)目所關(guān)聯(lián)的事實(shí)變換模板的時(shí)候，事情就變得又去了。有可能我們還會(huì)加入一個(gè)edit模式用一個(gè)可觀測(cè)的變量來跟蹤選擇的文章。
然后，我們的邏輯可能會(huì)變得越來越復(fù)雜，讓我們添加一個(gè)用來判斷該使用哪個(gè)模板的方法吧。

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

注意，這個(gè)方法使用數(shù)據(jù)項(xiàng)目作為第一個(gè)參數(shù)。Knockout從foreach的循環(huán)中向這個(gè)方法傳遞當(dāng)前的項(xiàng)目。我們的綁定就像這樣了：

現(xiàn)在，這個(gè)文章可以動(dòng)態(tài)地顯示summary，detail以及根據(jù)情況顯示edit。