Mvvm 如何将viewmodel中的单个变量绑定到view

我在剑道ui中使用MVVM。我见过许多使用模板绑定列表的示例，但我找不到一个将单个变量绑定到视图项的工作示例

我发现了下面的小提琴，但它没有显示下拉列表中的项目。代码中是否存在bug或其他问题

视图：

---

小提琴坏了，图书馆也旧了。我更新了jquery和，现在小提琴开始工作了：

https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.blueopal.min.css" />

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://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2018.2.516/styles/kendo.blueopal.min.css" />