Source 綁定可以把 ViewModel 的值和由 Kendo 模板定義的目標(biāo)元素綁定,如果 ViewModel 的值發(fā)生變化,被綁定的目標(biāo)元素也隨之發(fā)生變化。模板由屬性 data-template 指定,它的值為某個 script 定義的模板的 id. 如果沒有指明模板,則根據(jù)元素的標(biāo)記使用缺省的模版。
當(dāng) ViewModel 的值 為一數(shù)組時,那么通過 Source 綁定到模板時,會把數(shù)組中每個元素逐個應(yīng)用到模板,最后的輸出為應(yīng)用這些模板的結(jié)果的綜合。 添加刪除數(shù)組中的內(nèi)容,顯示的內(nèi)容也隨之變化。
注:綁定到 ViewModel 數(shù)組時,Source 指明的為單個跟元素名稱,例如:
<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template">
<li>
id: <span data-bind="text: id"></span>
name: <span data-bind="text: name"></span>
</li>
</script>
<script>
var viewModel = kendo.observable({
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});
kendo.bind($("ul"), viewModel);
</script>
這個例子會輸出三個 li 元素–每個對應(yīng)到 products 數(shù)組中一個元素,下面為輸出的 HTML 內(nèi)容:
<ul>
<li>
id: <span>1</span>
name: <span>Coffee</span>
</li>
<li>
id: <span>2</span>
name: <span>Tea</span>
</li>
<li>
id: <span>3</span>
name: <span>Juice</span>
</li>
</ul>
如果 ViewModel 綁定的數(shù)組的內(nèi)容為簡單類型(如數(shù)字,字符串,日期),這時在模板中需要使用 ”this” 關(guān)鍵字來引用當(dāng)前數(shù)組項:
<ul data-template="ul-template" data-bind="source: products">
</ul>
<script id="ul-template" type="text/x-kendo-template">
<li data-bind="text: this"></li>
</script>
<script>
var viewModel = kendo.observable({
products: [ "Coffee", "Tea", "Juice" ]
});
kendo.bind($("ul"), viewModel);
</script>
輸出內(nèi)容如下:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>
source 綁定也支持綁定到非數(shù)組值,此時在模板中引用到 ViewModel 的某個屬性,最終的結(jié)果為模板使用 ViewModel 后的結(jié)果。
<div data-template="div-template" data-bind="source: person">
<script id="div-template" type="text/x-kendo-template">
Name: <span data-bind="text: name"></span>
</script>
</div>
<script>
var viewModel = kendo.observable({
person: {
name: "John Doe"
}
});
kendo.bind($("div"), viewModel);
</script>
輸出:
<div>
Name: <span>John Doe</span>
</div>
你也可以直接綁定到 ViewModel 對象本身,此時可以使用把 source 的值設(shè)置為 “this” ,例如:
<div data-template="div-template" data-bind="source: this">
<script id="div-template" type="text/x-kendo-template">
Name: <span data-bind="text: name"></span>
</script>
</div>
<script>
var viewModel = kendo.observable({
name: "John Doe"
});
kendo.bind($("div"), viewModel);
</script>
結(jié)果如下:
<div>
Name: <span>John Doe</span>
</div>
當(dāng)數(shù)組綁定到 select 元素時,就創(chuàng)建多個 option 元素。
<select data-bind="source: colors"></select>
<script>
var viewModel = kendo.observable({
colors: [ "Red", "Green", "Blue" ]
});
kendo.bind($("select"), viewModel);
</script>
輸出的 HTML 元素如下:
<select>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
select 元素也可以綁定到 JavaScript 對象數(shù)組(非簡單類型),此時可以同時指定 data-text-field,data-value-field 用來指定 option 元素的 value 和 text 屬性,例如:
<select data-text-field="name" data-value-field="id"
data-bind="source: products"></select>
<script>
var viewModel = kendo.observable({
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});
kendo.bind($("select"), viewModel);
</script>
輸出如下:
<select>
<option value="1">Coffee</option>
<option value="2">Tea</option>
<option value="3">Juice</option>
</select>
更多建議: