Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value

Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性。当用户修改DOM元素或UI组件的值时，绑定的ViewModel的值也随之发生改名。同样，如果ViewModel的值发生变化，对应的UI也会发生变化。
注：Value绑定只可以用在支持Value属性的DOM元素或UI组件。支持Value绑定的元素有input,textarea和select, 支持value绑定的UI组件有AutoComplete, DropDownlist, ComboBox, DatePicker, TimePicker,NumbericTextBox和Slider.
如果你需要设置DOM元素或UI组件的文本或是HTML内容，请使用text和html绑定。
对于Checkboxes () 或 radio button()请使用checked绑定。[title3]Input和textarea Value绑定[/title3]

1	< div id = "view" >

2	< input data-bind = "value: inputValue" />

3	< textarea data-bind = "value: textareaValue" ></ textarea >

4

</ div >

5	< script >

6	var viewModel = kendo.observable({

7	inputValue: "Input value",

8	textareaValue: "Textarea value"

9

});

10

11	kendo.bind($("#view"), viewModel);

12	</ script >

上面代码当调用bind方法后，input元素显示inputValue的值，而textarea显示textareaValue的值。 如果用户修改input或textarea的值，对应的inputValue和textareaValue也随之变化。

缺省情况下，Value绑定依赖于DOM 的change事件，也就是当DOM元素失去焦点时触发该事件，UI的变化实现对ViewModel的更新。然而可以通过修改data-value-update属性来使用不同的DOM事件，比如keyup或keypress事件（不可使用keydown事件，只是因为keydown事件DOM元素的value尚未发生变化）。

1	< div id = "view" >

2	< input data-value-update = "keyup" data-bind = "value: inputValue" />

3

</ div >

4	< script >

5	var viewModel = kendo.observable({

6	inputValue: "Input value"

7

});

8

9	kendo.bind($("#view"), viewModel);

10	</ script >

[title3]Select元素绑定value[/title3]
当Select元素使用了预定义的选项时，Kendo MVVM 将根据ViewModel的值把和ViewModel值相同的option选项设定为选中状态。

1	< select data-bind = "value: selectedColor" >

2	< option value = "red" >Red</ option >

3	< option value = "green" >Green</ option >

4	< option value = "blue" >Blue</ option >

5	</ select >

6	< script >

7	var viewModel = kendo.observable({

8	selectedColor: "green"

9

});

10

11	kendo.bind($("select"), viewModel);

12	</ script >

在本例中，第二个选项（Green)被选中，这是因为它的value和selectedColor相同。 UI修改选项也会更新selectedColor的值。 如果option元素没有定义value，那么使用option的text属性。如果select支持多项选择，此时对应的ViewModel的属性也应该为一个数组。例如：

1	< select data-bind = "value: selectedColors" multiple = "multiple" >

2	< option >Red</ option >

3	< option >Green</ option >

4	< option >Blue</ option >

5	</ select >

6	< script >

7	var viewModel = kendo.observable({

8	selectedColors: ["Blue","Green"]

9

});

10

11	kendo.bind($("select"), viewModel);

12	</ script >