剑道绑定.更改视图模型时，视图不更新

Question

由于某些原因，在更改视图模型时，我的视图不会得到更新。我在这里做错了什么？

它显示：
Test1 100
Test 2 200

我期望的时间：
Test1 300
Test2 400

Javascript：

var testModel = kendo.data.Model.define({
fields: {
"Name": {
type: "text"
},
"Amount": {
type: "number"
}
}
});
testViewModel = new kendo.observable({
Data: [
new testModel({ "Name": "Test1", "Amount": 100 }),
new testModel({ "Name": "Test2", "Amount": 200 })
]
});
kendo.bind("#test", testViewModel.Data);
var data = testViewModel.Data;
data[0].Amount = 300;
data[1].Amount = 400;
testViewModel.set("Data", data);

HTML:

<div id="test" data-bind="source: Data" data-template="testTemplate"></div>
<script id="testTemplate" type="text/x-kendo-template">
<div>
<span data-bind="text: Name"></span>
<span data-bind="text: Amount"></span>
</div>
</script>

Answer 1

显然，在更新视图模型之后，我需要设置一个触发器来更新模板
像这样：

testViewModel.Data.trigger("change");

Answer 2

您有点混淆stufs。您不需要定义模型，也不需要触发更改事件。首先初始化可观察对象：

var testViewModel = new kendo.observable({
data: [
{ "Name": "Test1", "Amount": 100 },
{ "Name": "Test2", "Amount": 200 }
]
});

绑定：

kendo.bind("#test", testViewModel.Data);

更改数据：

testViewModel.data[0].set("Amount", 3000);

HTML，检查data-template有什么和script有什么：

<div id="test">
<div data-bind="source: data" data-template="testTemplate"></div>
<script id="testTemplate" type="text/x-kendo-template">
<div>
<span data-bind="text: Name"></span>
<span data-bind="text: Amount"></span>
</div>
</script>
</div>

就是这样！。

<div id="test">
<div data-bind="source: data" data-template="testTemplate">

</div>
<script id="testTemplate" type="text/x-kendo-template">
<div>
<span data-bind="text: Name"></span>
<span data-bind="text: Amount"></span>
</div>
</script>
</div>
<script>
var testViewModel = new kendo.observable({
data: [
{ "Name": "Test1", "Amount": 100 },
{ "Name": "Test2", "Amount": 200 }
]
});

kendo.bind($("#test"), testViewModel);

testViewModel.data[0].set("Amount", 3000);
</script>

工作示例：可观察绑定

检查如何使用可观察对象：可观察对象