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

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

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

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

缺省情況下，Value 綁定依賴于 DOM 的 change 事件，也就是當(dāng) DOM 元素失去焦點時觸發(fā)該事件，UI 的變化實現(xiàn)對 ViewModel 的更新。然而可以通過修改 data-value-update 屬性來使用不同的 DOM 事件，比如 keyup 或 keypress 事件（不可使用 keydown 事件，只是因為 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ù)定義的選項時，Kendo MVVM 將根據(jù) ViewModel 的值把和 ViewModel 值相同的 option 選項設(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>

在本例中，第二個選項（Green)被選中，這是因為它的 value 和 selectedColor 相同。 UI修改選項也會更新 selectedColor 的值。 如果 option 元素沒有定義 value，那么使用 option 的 text 屬性。

如果 select 支持多項選擇，此時對應(yīng)的 ViewModel 的屬性也應(yīng)該為一個數(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>