剑道绑定。更改视图模型时视图未更新答案

【问题标题】：Kendo binding. View is not updating when changing the viewmodel剑道绑定。更改视图模型时视图未更新
【发布时间】：2021-03-21 14:35:34
【问题描述】：

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

它显示：
测试1 100
测试2 200

当我期望时：
测试1 300
测试2 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>

【问题讨论】：

标签： javascript html kendo-ui kendo-observable

【解决方案1】：

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

testViewModel.Data.trigger("change");

【讨论】：

【解决方案2】：

你正在混合一些东西。您不需要定义模型，也不需要触发更改事件。首先初始化 observable 对象：

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>

工作示例：Observable binding

查看如何使用可观察对象：Observable object

【讨论】：