Kendo UI开发教程(12): Kendo MVVM 数据绑定(一) attr

Kendo UI MVVM数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ，这些属性可以绑定到DOM元素或是Kendo UI组件的属性。本篇介绍 attr 绑定。
attr 支持把ViewModel的属性或方法绑定到DOM元素的某个属性， 比如设置hyperlink 的herf 和title属性， image元素的 src 或 alt 属性。 其基本用法为
attr: { attribute1: field1, attribute2: field2 }
其中 attribute1 和 attribute2 为DOM元素的属性名称， 而 field1,field2为ViewModel对象的值域（属性）的名称。
比如：

1 <img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
2 <script>
3 var viewModel = kendo.observable({
4     imageSource: "http://www.kendoui.com/image/kendo-logo.png",
5     imageAlt: "Kendo Logo"
6 });
7
8 kendo.bind($("#logo"), viewModel);
9 </script>

在本例中，image元素的 src和 alt属性被绑定到viewModel对象的 imageSource和 imageAlt属性。 当调用kendo.bind方法，image元素和下面HTML元素等效：

1 <img id="logo" src="http://www.kendoui.com/image/kendo-logo.png"alt="Kendo Logo"" />

此时，如果修改viewModel的imageSource和 imageAlt属性的值，页面上显示的图片也随之发生变化。

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

attr 绑定也支持设置HTML5 数据属性绑定，例如：

1 <div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div>
2
3 <script>
4 var viewModel = kendo.observable({
5     fooValue: "foo",
6     barValue: "bar"
7 });
8
9 kendo.bind($("div"), viewModel);
10 </script>