0

フォームにデータを入力しているときに、ビュー モデルの動作を観察したい状況があります。モデルのように見える多くのフィールドを定義してそれらにバインドすることでこれを行うことができますが、それはちょっと面倒です。

現在、次のコードでこれを達成しています。

(function ($) {
    $.printJSON = function(value){
        return JSON.stringify(value, undefined, 2);
    }
})(jQuery);

var viewModel = kendo.observable({
                    // other fields etc
    update: function (e) {
        e.preventDefault();
        $("#json_result").html($.printJSON(this));
    }
});


<div style="width: 400px; float: left; padding-left: 15px;" >
    <button data-bind="click: update" value="Update" >Update</button>
    <pre id="json_result">
    </pre>
</div>

ボタンをクリックすると、関数が実行され、ビュー モデルの JSON が画面に描画されます。すべて適切に書式設定されています。

ただし、これにはまだボタンのクリックが必要です。それは私にとってそれほど大きな問題ではありませんが、これは多くの状況で必要なものではないため、実際にこれを行い、ビューモデルが何らかの形で変更されたときに更新する方法はありますか? 関数にバインドしようとしましたが、明示的な呼び出しなしでは更新されません。ビュー モデルに直接バインドしようとしましたが、それも機能しませんでした。

4

1 に答える 1

1

単に変更イベントをバインドすることもできます:

viewModel.bind("change", function (e) {
    $("#json_result").html($.printJSON(this));
});

または、計算フィールドを使用できます。

var viewModel = kendo.observable({
    field1: "field1",
    field2: "field2",
    field3: "field3",
    print: function () {
        // need to register for all fields so that the change event for print is triggered
        for (var fieldName in this) {
            if (this.hasOwnProperty(fieldName)) {
                this.get(fieldName);
            }
        }

        return $.printJSON(this.toJSON());
    }
});

そしてそれにバインドします：

<pre data-bind="html: print">

両方の方法を示すフィドルを参照してください: http://jsfiddle.net/lhoeppner/S2WeB/

于 2013-11-04T05:32:08.397 に答える