如何将ViewModel中的单个变量绑定到视图

我在剑道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>&nbsp;</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>

ViewModel:

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

https://jsfiddle.net/burkeholland/NqSuS/6/