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

Input 和 textarea Value 绑定

<div id="view"> 
    <input data-bind="value: inputValue" /> 
    <textarea data-bind="value: textareaValue"></textarea> 
</div> 
<script> 
var viewModel = kendo.observable({ 
    inputValue: "Input value", 
    textareaValue: "Textarea value" 
}); 
 
kendo.bind($("#view"), viewModel); 
</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 尚未发生变化)。

<div id="view"> 
    <input data-value-update="keyup" data-bind="value: inputValue" /> 
</div> 
<script> 
var viewModel = kendo.observable({ 
    inputValue: "Input value" 
}); 
 
kendo.bind($("#view"), viewModel); 
</script>

Select 元素绑定 value

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

<select data-bind="value: selectedColor"> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
    <option value="blue">Blue</option> 
</select> 
<script> 
var viewModel = kendo.observable({ 
    selectedColor: "green" 
}); 
 
kendo.bind($("select"), viewModel); 
</script>

在本例中,第二个选项(Green)被选中,这是因为它的 value 和 selectedColor 相同。 UI修改选项也会更新 selectedColor 的值。 如果 option 元素没有定义 value,那么使用 option 的 text 属性。

如果 select 支持多项选择,此时对应的 ViewModel 的属性也应该为一个数组。例如:

<select data-bind="value: selectedColors" multiple="multiple"> 
    <option>Red</option> 
    <option>Green</option> 
    <option>Blue</option> 
</select> 
<script> 
var viewModel = kendo.observable({ 
    selectedColors: ["Blue","Green"] 
}); 
 
kendo.bind($("select"), viewModel); 
</script>


 

 

发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Kendo MVVM 数据绑定(十) Source知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。