1. data-value-primitive 属性
<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.
<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.