4

KendoのuiMVVM機能をテストしていますが、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（{などを作成しました。これを行う必要はなく、jsonオブジェクトの配列を監視可能なコレクション（viewMode.Items）にダンプするだけです。これはうまく機能しますが繰り返しますが、個々のアイテムを更新しても更新されません...

前もって感謝します！

4

2 に答える 2

3

剣道から（トライアルライセンスを使用しているのでほぼ1週間後に...）これを行う方法についての回答を受け取りました：

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

それが機能なのかバグなのかはわかりませんが、実行しようとしていることはサポートされていません。リストの1つの要素を更新すると、実際には更新されますが、リストの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 に答える