Kendo MVVM - 绑定到整个视图模型答案

【问题标题】：Kendo MVVM - Bind to ENTIRE View ModelKendo MVVM - 绑定到整个视图模型
【发布时间】：2013-11-03 21:00:28
【问题描述】：

我有一种情况，我想在填充表单时观察视图模型的行为。我可以通过定义很多看起来有点像模型的字段并绑定到它们来做到这一点，但这有点麻烦。

我目前正在使用以下代码完成此操作；

(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 绘制到屏幕上，一切都很好并且格式化了。

但这仍然需要单击按钮。虽然这对我来说不是什么大问题，因为这不是我在很多情况下都需要的东西，有没有办法真正做到这一点并在视图模型发生任何变化时更新它？我尝试只绑定到该函数，并且它在没有显式调用的情况下永远不会更新，我尝试将权限绑定到视图模型，但这也不起作用。

【问题讨论】：

标签： kendo-ui kendo-mvvm

【解决方案1】：

您可以简单地绑定change 事件：

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/

【讨论】：