Question

我有一个简单的Knockout设置，其中我试图实现多个视图模型。它似乎与一个问题有关：正确使用toJSON使我失望。

我的HTML是：

<!DOCTYPE html>
<html>
<head>
<title>Playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="content/css/bootstrap.css" type="text/css" media="all" />

<script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="lib/knockout-3.2.0.js"></script>
<script type="text/javascript" src="lib/bootstrap.js"></script>

</head>
<body>
<div class="container" id="appHost">
<section id="nameHeader">
    <label>
    First Name:
    <input data-bind="value: firstName, enable: canEdit" />
    </label>
    <button data-bind="click: toggleEdit" class="btn btn-primary">Toggle Edit</button>
</section>
<section id="other">
    <label>
    First Name:
    <input data-bind="value: firstName, enable: canEdit" />
    </label>

    <button data-bind="click: toggleEdit" class="btn btn-primary">Toggle Edit</button>

</section>

<h2>Debugging View</h2>
<pre data-bind="text: ko.toJSON({name1: self.NameViewModel, name2: self.OtherViewModel})"></pre>

<script type="text/javascript" src="sample.js"></script>
</div>
</body>
</html>

我的sample.js是：

(function (app, $, ko) {
    var self = this;

    var NameViewModel = function () {
    var self = this;

    self.firstName = ko.observable('');
    self.canEdit = ko.observable(true);

    self.toggleEdit = function () {
        self.canEdit(!self.canEdit());
    };

    };

    var OtherViewModel = function () {
    var self = this;

    self.firstName = ko.observable('');
    self.canEdit = ko.observable(true);

    self.toggleEdit = function () {
        self.canEdit(!self.canEdit());
    };

    };

    $(document).ready(function () {
    //ko.applyBindings(new NameViewModel());
    ko.applyBindings(new NameViewModel(), $("#nameHeader")[0]);
    ko.applyBindings(new OtherViewModel(), $("#other")[0]);
    });

})(window.app = window.app || {}, jQuery, ko);

如果我重构以便只有一个视图模型，并将toJSON更改为使用$ root，则页面按预期工作。。。也就是说，我在＆＃34; Debugging＆＃34;中看到了我的模型的JSON视图。 HTML部分。

如何使用toJSON获取特定于视图模型的视图？或者，如何将整个页面作为单个JSON对象获取。。。可能吗？我试过了：

ko.toJSON（NameViewModel）

我上面例子中的代码是我最近尝试查看这两个模型的。

感谢任何帮助。

维克

Answer 1

我认为

ko.toJSON($data, null, 2)

应该完成你想要的东西

使用多种视图模型淘汰toJson

1 个答案: