資訊專欄INFORMATION COLUMN
摘要：在中動態(tài)更換模板本文來源由赤石俊哉翻譯整理。當(dāng)我們開始基于在數(shù)組中的每一個項目所關(guān)聯(lián)的事實變換模板的時候，事情就變得又去了。我們的綁定就像這樣了現(xiàn)在，這個文章可以動態(tài)地顯示，以及根據(jù)情況顯示。
在KnockoutJS中動態(tài)更換模板
NOTE:
本文來源 Dynamically Changing Templates in KnockoutJS - Knock Me Out
由 赤石俊哉 翻譯整理。
在KnockoutJS的1.12版本之后新增了一個很有趣也很有用的特性，那就是可以為template綁定的模板名稱傳遞一個函數(shù)。這樣的話，就方便了：
允許你基于你的視圖模型狀態(tài)來動態(tài)渲染一個部分
在一個foreach條件里面，允許你使用不同的模板渲染數(shù)組中的每個獨立的項目。
讓你在不需要過多在意條件邏輯的情況下，使每種情況的模板簡短且可復(fù)用。
舉一個簡單的場景來說，你可能希望一個用戶可以在摘要和詳細兩種顯示文章的方式之間切換。
我們的視圖模型可以是這樣的：
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ù)綁定中，我們設(shè)置selectedView為可觀測的，并且是基于一些單選框的。模板的名字指定不再是一個字符串，而是可以用selectedView來綁定的。
Note: 我們返回一個匿名函數(shù)，因為直接為一個可觀測的變量設(shè)置的綁定，只會在我們不給這個模板綁定傳遞選項作為對象遍歷的時候才生效。我們必須要將foreach或者data傳遞給這個綁定。
Summary Details
現(xiàn)在，我們可以簡單的在summary和details兩個模式之間切換了。通常來說，在我們可以使用一個擁有條件邏輯的模板為每一個視圖之前，我們需要使用visible綁定來隱藏一個或者多個。
當(dāng)我們開始基于在數(shù)組中的每一個項目所關(guān)聯(lián)的事實變換模板的時候，事情就變得又去了。有可能我們還會加入一個edit模式用一個可觀測的變量來跟蹤選擇的文章。
然后，我們的邏輯可能會變得越來越復(fù)雜，讓我們添加一個用來判斷該使用哪個模板的方法吧。
viewModel.selectedArticle = ko.observable();
viewModel.templateToUse = function(item) {
return item === this.selectedArticle() ? ‘edit’ : this.selectedView();
}.bind(viewModel);
注意，這個方法使用數(shù)據(jù)項目作為第一個參數(shù)。Knockout從foreach的循環(huán)中向這個方法傳遞當(dāng)前的項目。我們的綁定就像這樣了：
現(xiàn)在，這個文章可以動態(tài)地顯示summary，detail以及根據(jù)情況顯示edit。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84155.html
摘要：當(dāng)然我們還可以引入框架，這些框架一般都自帶模板處理引擎，比如等語義化命名和語義化標簽我們盡量多采用語義化來命名，并且采用語義化標簽來書寫代碼，多用中新增的標簽來書寫。 1.黃金法則（Golden rule） 不管有多少人參與同一個項目，一定要確保每一行代碼都像是同一個人編寫的。 Every line of code should appear to be written by a si...
摘要：目前已經(jīng)在大大小小多個線上產(chǎn)品中使用了，也收集了一些有效的建議好了，該看下一個最簡單的組件長什么樣吧免費領(lǐng)取驗證碼內(nèi)容安全短信發(fā)送直播點播體驗包及云服務(wù)器等套餐更多網(wǎng)易技術(shù)產(chǎn)品運營經(jīng)驗分享請訪問網(wǎng)易云社區(qū)。文章來源網(wǎng)易云社區(qū) 本文由作者鄭海波授權(quán)網(wǎng)易云社區(qū)發(fā)布。 此文摘自regularjs的指南， 目前指南正在全面更新， 把老文檔的【接口/語法部分】統(tǒng)一放到了獨立的 Reference...
摘要：近幾年前端框架特別流行，比如等。有沒有能夠在多種前端控件下都能使用的表格控件還真有中的，能支持很多主流的框架。在純下使用文件引入的文件和樣式引入和文件。獲得控件，并進行數(shù)據(jù)綁定。 近幾年 Web 前端框架特別流行，比如 AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS 等。表格控件是我們在開發(fā)中經(jīng)常要用到的控件。有沒有能夠在多種前端控件下都能...
摘要：前言我是，如果你還不認識我，不妨先看看技術(shù)的前世今生一，以及技術(shù)的前世今生二前面我提過，我的大哥有一個叫的死黨，這家伙有事沒事經(jīng)常上我們家串門。時間來到了年，在那前后發(fā)生了兩件事讓我印象深刻。傳送門技術(shù)的前世今生一技術(shù)的前世今生二 前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術(shù)的前世今生（一）》，以及《Web技術(shù)的前世今生（二）》 前面我提過，我的大哥HTML...
閱讀 3259·2021-10-21 17:50
閱讀 3265·2021-10-08 10:05
閱讀 3400·2021-09-22 15:04
閱讀 590·2019-08-30 14:00
閱讀 1952·2019-08-29 17:01
閱讀 1517·2019-08-29 15:16
閱讀 3228·2019-08-26 13:25
閱讀 860·2019-08-26 11:44
