4

我正在测试 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>

然后在我的脚本块中：

<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>

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

另外，我创建了 var reportItem = new kendo.data.ObservableObject({ etc etc 用于测试 - 我宁愿不必这样做，只需将 json 对象数组转储到我的可观察集合 (viewMode.Items) 中。这很好用，但是再次更新单个项目时它不会更新...

提前致谢！

4

2 回答 2

3

刚刚收到来自 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。

于 2013-01-09T08:21:44.920 回答
1

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

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

所以，你应该做的实际上是用收到的元素替换当前元素。代替：

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);
    }
});

顺便说一句：你有没有意识到你有itemTemp.Status == newItem.Status;而不是itemTemp.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);
    }
};
于 2012-12-31T00:44:31.510 回答