Kendo ui listView中的行未使用Kendo MVVM进行更新

我正在测试Kendo的ui MVVM功能，但似乎无法解决如何更新viewModel项以便它们更新listView中的行

如果我用通过websocket发送给我的新（json）项目替换所有项目，那么它会更新得很好，但我只是尝试更新匹配的项目，希望看到这些更改出现在我的视图（listView div）中

这是我代码的摘录-我做错了什么

<div id="listView">
    <table>
        <thead>
            <tr>
                <th>BatchID</th>
                <th>Status</th>
                <th>Progress</th>
                <th>Owner</th>
                <th>(Est)Completion Time</th>
            </tr>
        </thead>
        <tbody data-template="row-template" data-bind="source: items"></tbody>
        <tfoot data-template="footer-template" data-bind="source: this"></tfoot>
    </table>
</div>

BatchID
地位
进展
所有者
（Est）完成时间

然后在我的脚本块中：

<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: BatchID"></td>
        <td data-bind="text: Status"></td>
        <td data-bind="text: Progress"></td>
        <td data-bind="text: Owner"></td>
        <td data-bind="text: EstCompletion"></td>
    </tr>
</script>

<script id="footer-template" type="text/x-kendo-template">
    <tr>
        <td>
            Batch count: #: total() #
        </td>
    </tr>
</script>

<script>

    $(document).ready(function () {

        var viewModel = kendo.observable({
            items: [],
            total: function () {
                return this.get("items").length;
            }
        });

        kendo.bind($("#listView"), viewModel);


        // register this reporting widget
        var webSocket = CreateSocket("screen2", "reporting", "default", true);

        webSocket.onmessage = function (e) {
            try {

                var smd = JSON.parse(e.data);
                var data = JSON.parse(smd.Data);

                jQuery.each(data, function () {

                    var id = this.BatchID;
                    var newItem = this;

                    var hasRow = false;
                    jQuery.each(viewModel.items, function () {
                        var itemTemp = this;
                        if (itemTemp.BatchID == id) {
                            hasRow = true;
                            itemTemp.Status == newItem.Status;
                            itemTemp.Progress = newItem.Progress;
                            itemTemp.EstCompletion = newItem.EstCompletion;
                            itemTemp.Completed = newItem.Completed;
                        }
                    });

                    if (!hasRow) {
                        var reportItem = new kendo.data.ObservableObject({
                            BatchID: "",
                            Owner: "",
                            Status: "",
                            Progress: "",
                            EstCompletion: "",
                            Completed: ""
                        });

                        reportItem.BatchID = this.BatchID;
                        reportItem.Owner = this.Owner;
                        reportItem.Status = this.Status;
                        reportItem.Progress = this.Progress;
                        reportItem.EstCompletion = this.EstCompletion;
                        reportItem.Completed = this.Completed;

                        viewModel.items.push(reportItem);
                    }

                });

            }
            catch (e) {
                //alert(e.message);
            }
        };

        webSocket.onopen = function (e) {

            // now register our interest in receiving reporting monitoring data
            var bor = new SymMsgUp(GlobalInfo.UserID, "reporting", "default", "dfregister");

            // convert to Json and send it off the the server
            webSocket.send(bor.toServer());
        };

        webSocket.onclose = function (e) {
            //responseDiv.innerHTML += '<div>Disconnected.</div>';
        };

        webSocket.onerror = function (e) {
            //responseDiv.innerHTML += '<div>Error</div>'
        };



    });

</script>

批次计数：#：总计（）#
$（文档）.ready（函数（）{
var viewModel=kendo.observable({
项目：[]，
总计：功能（）{
返回此.get（“items”）.length；
}
});
bind（$（“#listView”）、viewModel）；
//注册此报告小部件
var webSocket=CreateSocket（“屏幕2”，“报告”，“默认值”，true）；
webSocket.onmessage=函数（e）{
试一试{
var smd=JSON.parse（e.data）；
var data=JSON.parse（smd.data）；
每个（数据、函数（）{
var id=this.BatchID；
var newItem=这个；
var hasRow=false；
jQuery.each（viewModel.items，函数（）{
var itemTemp=此；
如果（itemTemp.BatchID==id）{
哈斯罗=真；
itemTemp.Status==newItem.Status；
itemTemp.Progress=newItem.Progress；
itemTemp.EstCompletion=newItem.EstCompletion；
itemTemp.Completed=新项目已完成；
}
});
如果（！hasRow）{
var reportItem=新的kendo.data.observeObject({
BatchID:“”，
所有者：“，
地位：“，
进展：“，
完成日期：“，
已完成：“”
});
reportItem.BatchID=this.BatchID；
reportItem.Owner=此.Owner；
reportItem.Status=此.Status；
reportItem.Progress=此.Progress；
reportItem.EstCompletion=此.EstCompletion；
reportItem.Completed=此.Completed；
viewModel.items.push（reportItem）；
}
});
}
捕获（e）{
//警报（e.message）；
}
};
webSocket.onopen=函数（e）{
//现在登记我们对接收报告监测数据的兴趣
var bor=new SymMsgUp（GlobalInfo.UserID，“报告”、“默认”、“dfregister”）；
//转换为Json并将其发送到服务器
send（bor.toServer（））；
};
webSocket.onclose=函数（e）{
//responseDiv.innerHTML+=“已断开连接”；
};
webSocket.onerror=函数（e）{
//responseDiv.innerHTML+=“错误”
};
});

更新会发生（我用调试器检查过），但这些更改不会反映在视图中

此外，我还创建了var reportItem=new kendo.data.observeObject（{etc etc以便测试-我不必这样做，只需将json对象数组转储到我的可观察集合（viewMode.Items）中即可。这很好地工作，但当我更新单个项目时，它不会更新

---

提前感谢！

不确定这是功能还是错误，但不支持您尝试执行的操作。如果您更新列表中的一个元素，则它实际上已更新，但如果您更新列表中一个项目的字段，则它不受支持

这意味着实际上只观察到第一级

因此，您应该实际使用接收到的元素替换当前元素，而不是：

if (itemTemp.BatchID == id) {
    hasRow = true;
    itemTemp.Status == newItem.Status;
    itemTemp.Progress = newItem.Progress;
    itemTemp.EstCompletion = newItem.EstCompletion;
    itemTemp.Completed = newItem.Completed;
}

你应该：

jQuery.each(viewModel.items, function () {
    var itemTemp = this;
    if (itemTemp.BatchID == id) {
        hasRow = true;
        itemTemp.Status == newItem.Status;
        itemTemp.Progress = newItem.Progress;
        itemTemp.EstCompletion = newItem.EstCompletion;
        itemTemp.Completed = newItem.Completed;
    }
});

jQuery.each(viewModel.items, function (idx, old) {
    if (old.BatchID == id) {
        hasRow = true;
        viewModel.items.splice(idx, 1, newItem);
    }
});

你应该：

jQuery.each(viewModel.items, function () {
    var itemTemp = this;
    if (itemTemp.BatchID == id) {
        hasRow = true;
        itemTemp.Status == newItem.Status;
        itemTemp.Progress = newItem.Progress;
        itemTemp.EstCompletion = newItem.EstCompletion;
        itemTemp.Completed = newItem.Completed;
    }
});

jQuery.each(viewModel.items, function (idx, old) {
    if (old.BatchID == id) {
        hasRow = true;
        viewModel.items.splice(idx, 1, newItem);
    }
});

顺便说一句：你知道你有

itemtep.Status==newItem.Status；

而不是

itemtep.Status=newItem.Status；

因此，清理后的代码应如下所示：

webSocket.onmessage = function (e) {
    try {

        var smd = JSON.parse(e.data);
        var data = JSON.parse(smd.Data);

        jQuery.each(data, function () {
            var newItem = this;
            var hasRow = false;
            jQuery.each(viewModel.items, function (idx, oldItem) {
                if (oldItem.BatchID == newItem.BatchID) {
                    hasRow = true;
                    viewModel.items.splice(idx, 1, newItem);
                }
            });
            if (!hasRow) {
                viewModel.items.push(newItem);
            }
        });
    }
    catch (e) {
        //alert(e.message);
    }
};

---

刚刚收到Kendo关于如何做到这一点的答复（大约一周后，因为我正在使用试用许可证…）：

$(function(){
  var viewModel = kendo.observable({
    products: [
        { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
        { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
        { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
        { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
    ],
    newPrice: 0,
    itemIndex: 0,
    setPrice: function(e){
      this.products[this.itemIndex].set("price", this.newPrice);
    }
});

kendo.bind($("body"), viewModel);

});

编辑： 我只是想解释一下，这句话的意思是：

this.products[this.itemIndex].set("price", this.newPrice);

---

这就是我所追求的——一种在他们的可观察集合中更新条目并更新ui的方法。

感谢Ona——这真是个好办法——可惜它不支持wpf那样的多级观察，但可能在将来？…对于混乱的代码，很抱歉，为了找到解决剑道问题的方法，它变得越来越臃肿了！-bug wa现在这个项目实际上被替换了，我有一个新问题（可选：true）使用模板的kendoListView的功能。当项目被选中但随后被替换时，它将失去其“选中”状态。我是否必须通过切换“选中的类”并在重新插入后再次添加它来解决此问题？@Marcel event问题表明，在您的示例中，listview表示您实际上没有使用

kendoListView

，可能您显示的代码是一个修改版本，因此我不太容易向您显示其他问题的确切代码。基本上，您应该开始获取

列表视图

中所选的节点。您可以调用

选择（）