【发布时间】：2018-06-18 14:34:08
【问题描述】：
我在剑道 UI 中使用 MVVM。我见过很多使用模板绑定列表的示例，但我找不到将单个变量绑定到视图项的工作示例。
我找到了以下小提琴，但它没有显示下拉列表中的项目。代码是否存在错误或其他原因？
查看：
<div class="form">
<dl>
<dt>Type</dt>
<dd>
<select data-role="dropdownlist" data-bind="source: type, value: expenseType" data-text-field="name" data-value-field="value" ></select>
</dd>
<dt>Merchant</dt>
<dd><input id="merchant" type="text" class='k-textbox' data-bind="value: merchant" /></dd>
<dt>Amount</dt>
<dd><input data-role="numerictextbox" data-bind="value: amount" id="amount" type="text" /></dd>
</dl>
<dt> </dt>
<dd><button id="create" data-bind="click: create" class="k-button">Add</button></dd>
</div>
<div class="span4">
<div data-role="grid" data-sortable="true" data-bind="source: expenses" data-columns='["Type", "Merchant", "Amount"]' ></div>
</div>
视图模型：
var viewModel = kendo.observable({
// expenses array will hold the grid values
expenses: [],
// type array populates the drop down
type: [{ name: "Food", value: "food"}, { name: "Clothing", value: "clothing"}, { name: "Bills", value: "bills" }],
// expenseType holds the currently selected value of the dropdown list
expenseType: "food",
// the values are bound to the merchant and amount fields
merchant: null,
amount: null,
// event execute on click of add button
create: function(e) {
// add the items to the array of expenses
this.get("expenses").push({Type: this.get("expenseType"), Merchant: this.get("merchant"), Amount: this.get("amount")});
// reset the form
this.set("expenseType", "food");
this.set("merchant", "");
this.set("amount", "");
}
});
// apply the bindings
kendo.bind(document.body.children, viewModel);
https://www.telerik.com/blogs/bind-this-a-look-at-kendo-ui-mvvm
【问题讨论】：