0

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

它显示：
Test1 100
Test2 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>
4

2 回答 2

0

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

testViewModel.Data.trigger("change");
于 2021-03-21T17:27:58.457 回答
0

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

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>

工作示例：可观察绑定

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

于 2021-03-21T19:33:39.943 回答