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