kendoDropDownList使用经验

1. data-value-primitive 属性

a.当data-value-primitive 为false（默认值），将选中项（item)赋给View-Model字段; 

详见：http://docs.kendoui.com/getting-started/framework/mvvm/bindings/value#use-the-value-binding-with-a-select-whose-options-are-created-by-the-source-binding Use the value binding with a select whose options are created by the source binding

<select data-value-field="id" data-text-field="name"
       data-bind="value: selectedProduct, source: products">
</select>
<script>
var viewModel = kendo.observable({
    selectedProduct: null,
    products: [
        { id: 1, name: "Coffee" },
        { id: 2, name: "Tea" },
        { id: 3, name: "Juice" }
    ]
});

viewModel.selectedProduct = viewModel.products[1];

kendo.bind($("select"), viewModel);
</script>

In this example the second option will be selected after calling kendo.bind. It's value attribute is equal to the value of the id field of theselectedProduct. If the user selects another option the selectedProduct will be set to the corresponding item from the products array.

You can also use the value binding with a View-Model field which is of primitive type.

b.而当data-value-primitive 为true 时, 即将选中项中绑定字段的值赋给View-Model字段;

点击打开链接详见：http://docs.kendoui.com/getting-started/framework/mvvm/bindings/value#use-the-value-binding-with-a-select-widget-to-update-the-view-model-field-with-the-value-field-when-the-initial-value-is-null. Use the value binding with a select widget to update the View-Model field with the value field when the initial value is null.

<select data-role="dropdownlist" data-option-label="Select product..." data-value-primitive="true" 
  data-value-field="id" data-text-field="name" data-bind="value: selectedProductId, source: products">
</select>
<script>
var viewModel = kendo.observable({
    selectedProductId: null,
    products: [
        { id: 1, name: "Coffee" },
        { id: 2, name: "Tea" },
        { id: 3, name: "Juice" }
    ]
});

kendo.bind($("select"), viewModel);
</script>

By default the value binding for the select widgets(AutoComplete, DropDownList, ComboBox, MultiSelect) uses the selected item from the data to update the View-Model field when the initial value is null. The data-primitive-field attribute can be used to specify that the View-Model field should be updated with the item value field instead.