KnockoutJS 3.X API 第六章 組件(1) 組件和自定義元素 - 概述
Components (組件)是一個強大的，干凈的方式組織您的UI代碼，可重復使用的塊。 :
- …可以表示單獨的控件/窗口小部件或應用程序的整個部分
- …包含自己的視圖，通常（但可選）自己的視圖模型
- …可以預加載或通過AMD或其他模塊系統異步加載（按需）
- …可以接收參數，并可選地將更改寫回到它們或調用回調
- …可以一起組成（嵌套）或繼承自其他組件
- …可以輕松地打包，以便跨項目進行重用
- …讓您定義自己的約定/邏輯進行配置和加載
此模式有利于大型應用程序，因為它通過明確的組織和封裝簡化了開發，并通過根據需要增量式加載應用程序代碼和模板來幫助提高運行時性能。
自定義元素是用于消費組件的可選但方便的語法。 不需要使用綁定注入組件的占位符<div>，您可以使用具有自定義元素名稱的更多自描述標記（例如，<voting-button>或<product-editor>）。 Knockout小心確保兼容性，即使與舊的瀏覽器，如IE 6。
示例1：喜歡/不喜歡小部件
可以使用ko.components.register注冊組件（技術上，注冊是可選的，但它是最簡單的入門方式）。 組件定義指定一個viewModel和模板。 例如：
ko.components.register('like-widget', {
viewModel: function(params) {
// Data: value is either null, 'like', or 'dislike'
this.chosenValue = params.value;
// Behaviors
this.like = function() { this.chosenValue('like'); }.bind(this);
this.dislike = function() { this.chosenValue('dislike'); }.bind(this);
},
template:
'<div class="like-or-dislike" data-bind="visible: !chosenValue()">\
<button data-bind="click: like">Like it</button>\
<button data-bind="click: dislike">Dislike it</button>\
</div>\
<div class="result" data-bind="visible: chosenValue">\
You <strong data-bind="text: chosenValue"></strong> it\
</div>'
});通常，您將從外部文件加載視圖模型和模板，而不是像這樣聲明它們。
現在，要使用此組件，您可以從應用程序中的任何其他視圖引用它，可以使用組件綁定或使用自定義元素。 下面是一個使用它作為自定義元素的實例：
UI源碼：
<ul data-bind="foreach: products"> <li class="product"> <strong data-bind="text: name"></strong> <like-widget params="value: userRating"></like-widget> </li> </ul>
視圖模型源碼：
function Product(name, rating) { this.name = name; this.userRating = ko.observable(rating || null); } function MyViewModel() { this.products = [ new Product('Garlic bread'), new Product('Pain au chocolat'), new Product('Seagull spaghetti', 'like') // This one was already 'liked' ]; } ko.components.register('like-widget', { viewModel: function(params) { // Data: value is either null, 'like', or 'dislike' this.chosenValue = params.value; // Behaviors this.like = function() { this.chosenValue('like'); }.bind(this); this.dislike = function() { this.chosenValue('dislike'); }.bind(this); }, template: '<div class="like-or-dislike" data-bind="visible: !chosenValue()">\ <button data-bind="click: like">Like it</button>\ <button data-bind="click: dislike">Dislike it</button>\ </div>\ <div class="result" data-bind="visible: chosenValue">\ You <strong data-bind="text: chosenValue"></strong> it\ </div>' }); ko.applyBindings(new MyViewModel());
在本示例中，組件可以顯示和編輯一個名為“產品視圖模型類”上的“用戶評級”的observable屬性。
示例2：根據需要從外部文件加載類似/不喜歡小部件
在大多數應用程序中，您需要將組件視圖模型和模板保留在外部文件中。 如果將Knockout配置為通過AMD模塊加載器（如require.js）獲取它們，那么可以預加載（可能捆綁/縮減）或根據需要增量加載它們。
下面是一個配置示例：
ko.components.register('like-or-dislike', {
viewModel: { require: 'files/component-like-widget' },
template: { require: 'text!files/component-like-widget.html' }
});要求
為了這個工作，文件files / component-like-widget.js和files / component-like-widget.html需要存在。 檢查出來（并查看源代碼上的.html） - 正如你將看到的，這是更清潔和更方便的，包括定義中的內聯代碼。
此外，您需要引用一個合適的模塊加載器庫（例如require.js）或實現一個知道如何抓取您的文件的自定義組件加載器。
使用組件
現在喜歡或不喜歡可以像以前一樣使用組件綁定或自定義元素：
UI源碼：
<ul data-bind="foreach: products"> <li class="product"> <strong data-bind="text: name"></strong> <like-or-dislike params="value: userRating"></like-or-dislike> </li> </ul> <button data-bind="click: addProduct">Add a product</button>
視圖模型源碼：
function Product(name, rating) { this.name = name; this.userRating = ko.observable(rating || null); } function MyViewModel() { this.products = ko.observableArray(); // Start empty } MyViewModel.prototype.addProduct = function() { var name = 'Product ' + (this.products().length + 1); this.products.push(new Product(name)); }; ko.applyBindings(new MyViewModel());
如果您在首次單擊“添加產品”之前打開瀏覽器開發人員工具的“網絡檢查器”，您會看到組件的.js / .html文件在首次需要時被抓取，然后保留以供重用。
浙公網安備 33010602011771號