Kendo UI 數(shù)據(jù)綁定(一) attr

Kendo MVVM 數(shù)據(jù)綁定(一) attr

Kendo UI MVVM 數(shù)據(jù)綁定支持的綁定屬性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ，這些屬性可以綁定到 DOM 元素或是 Kendo UI 組件的屬性。本篇介紹 attr 綁定。attr 支持把 ViewModel 的屬性或方法綁定到 DOM 元素的某個(gè)屬性， 比如設(shè)置 hyperlink 的 herf 和 title 屬性， image 元素的 src 或 alt 屬性。 其基本用法為attr: { attribute1: field1, attribute2: field2 }其中 attribute1 和 attribute2 為 DOM 元素的屬性名稱， 而 field1,field2 為 ViewModel 對象的值域（屬性）的名稱。比如：

<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
<script>
var viewModel = kendo.observable({
    imageSource: "http://www.kendoui.com/image/kendo-logo.png",
    imageAlt: "Kendo Logo"
});

kendo.bind($("#logo"), viewModel);
</script>

在本例中，image 元素的 src 和 alt 屬性被綁定到 viewModel 對象的 imageSource 和 imageAlt 屬性。 當(dāng)調(diào)用 kendo.bind 方法，image 元素和下面 HTML 元素等效：

<img id="logo" src="/attachments/image/wk/kendouidevelopmenttutorial/kendo-logo.png" alt="Kendo Logo"" />

此時(shí)，如果修改 viewModel 的 imageSource 和 imageAlt 屬性的值，頁面上顯示的圖片也隨之發(fā)生變化。

注意：如果需要綁定到 DOM 元素的 value 或 checked 屬性，你需要使用 Kendo MVVM 的 value 和 checked 綁定方法。

attr 綁定也支持設(shè)置 HTML5 數(shù)據(jù)屬性綁定，例如：

<div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div>

<script>
var viewModel = kendo.observable({
    fooValue: "foo",
    barValue: "bar"
});

kendo.bind($("div"), viewModel);
</script>