Question

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

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

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

但这仍然需要点击按钮。虽然这对我来说不是一个大问题，因为这不是我在很多情况下所需要的东西，有没有办法实际做到这一点并在视图模型以任何方式改变时更新？我试图绑定到该函数，它永远不会更新没有显式调用，我尝试绑定到视图模型，这也不起作用。

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

Kendo MVVM - 绑定到整个View模型

1 个答案: