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绑定。
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
>
当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
>