Kendo MVVM 數據綁定(十) Source

Source 綁定可以把 ViewModel 的值和由 Kendo 模板定義的目標元素綁定，如果 ViewModel 的值發生變化，被綁定的目標元素也隨之發生變化。模板由屬性 data-template 指定，它的值為某個 script 定義的模板的 id. 如果沒有指明模板，則根據元素的標記使用缺省的模版。

Source 綁定到數組

當 ViewModel 的值 為一數組時，那麽通過 Source 綁定到模板時，會把數組中每個元素逐個應用到模板，最後的輸出為應用這些模板的結果的綜合。 添加刪除數組中的內容，顯示的內容也隨之變化。

註：綁定到 ViewModel 數組時，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 元素–每個對應到 products 數組中一個元素，下面為輸出的 HTML 內容：

<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 綁定的數組的內容為簡單類型（如數字，字符串，日期），這時在模板中需要使用 ”this” 關鍵字來引用當前數組項：

<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>

輸出內容如下：

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Juice</li>
</ul>

Source綁定到非數組

source 綁定也支持綁定到非數組值，此時在模板中引用到 ViewModel 的某個屬性，最終的結果為模板使用 ViewModel 後的結果。

<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 的值設置為 “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>

結果如下：

<div>
Name: <span>John Doe</span>
</div>

Source 綁定 Select 元素

當數組綁定到 select 元素時，就創建多個 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 對象數組（非簡單類型），此時可以同時指定 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>

Kendo MVVM 數據綁定(十) Source