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

Value 綁定可以把 ViewModel 的某個(gè)屬性綁定到 DOM 元素或某個(gè) UI 組件的 Value 屬性。當(dāng)用戶修改 DOM 元素或 UI 組件的值時(shí)，綁定的 ViewModel 的值也隨之發(fā)生改名。同樣，如果 ViewModel 的值發(fā)生變化，對(duì)應(yīng)的 UI 也會(huì)發(fā)生變化。 注： Value 綁定只可以用在支持 Value 屬性的 DOM 元素或 UI 組件。支持 Value 綁定的元素有 input,textarea 和 select, 支持value綁定的 UI 組件有 AutoComplete, DropDownlist, ComboBox, DatePicker, TimePicker,NumbericTextBox 和 Slider. 如果你需要設(shè)置 DOM 元素或 UI 組件的文本或是 HTML 內(nèi)容，請(qǐng)使用 text 和 html 綁定。 對(duì)于Checkboxes () 或 radio button()請(qǐng)使用 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>

上面代碼當(dāng)調(diào)用 bind 方法后，input 元素顯示 inputValue 的值，而 textarea 顯示 textareaValue 的值。 如果用戶修改 input 或 textarea 的值，對(duì)應(yīng)的 inputValue 和 textareaValue 也隨之變化。

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/32.jpg" alt="" />

缺省情況下，Value 綁定依賴于 DOM 的 change 事件，也就是當(dāng) DOM 元素失去焦點(diǎn)時(shí)觸發(fā)該事件，UI 的變化實(shí)現(xiàn)對(duì) ViewModel 的更新。然而可以通過(guò)修改 data-value-update 屬性來(lái)使用不同的 DOM 事件，比如 keyup 或 keypress 事件（不可使用 keydown 事件，只是因?yàn)? keydown 事件 DOM 元素的 value 尚未發(fā)生變化）。

<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

當(dāng) Select 元素使用了預(yù)定義的選項(xiàng)時(shí)，Kendo MVVM 將根據(jù) ViewModel 的值把和 ViewModel 值相同的 option 選項(xiàng)設(shè)定為選中狀態(tài)。

<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>

在本例中，第二個(gè)選項(xiàng)（Green)被選中，這是因?yàn)樗?value 和 selectedColor 相同。 UI修改選項(xiàng)也會(huì)更新 selectedColor 的值。 如果 option 元素沒(méi)有定義 value，那么使用 option 的 text 屬性。

如果 select 支持多項(xiàng)選擇，此時(shí)對(duì)應(yīng)的 ViewModel 的屬性也應(yīng)該為一個(gè)數(shù)組。例如：

<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>

http://wiki.jikexueyuan.com/project/kendo-ui-development-tutorial/images/33.jpg" alt="" />