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

Input和textarea Value綁定

​ ​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元素綁定value

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