从对象更新视图模型不起作用

Question

我希望能够观察视图模型内的对象。我有一个没有按预期工作的简单示例，任何人都可以看到问题吗？

使用淘汰赛 1.1.1，有 2 个输入：

<form data-bind="submit: save">
    <input type="text" data-bind="value: deckName" />
    <input type="text" data-bind="value: deck().Name" />
    <button type="submit">Go</button>
</form>

页面加载时，输入获取默认值，但在提交表单时viewModel.deck().Name 不会更新，但viewModel.deckName 会更新。

<script type="text/javascript">
    var initialData = {"Name":"test"};

    var viewModel = {
        deck: ko.observable(initialData),
        deckName: initialData.Name,
        save: function() {
            ko.utils.postJson(location.href, { deck: this.deck, deckName: this.deckName });
        }
    };
    ko.applyBindings(viewModel);
</script>

在 POST 表单上，deck 无论输入如何都将发送“测试”，而deckName 将是相应的输入值。

我真正想要的是能够观察对象viewModel.deck，然后将其属性绑定到输入，但属性不会更新。

Answer 1

您提供的内容有几个问题。

1. 由于deck().Name 是static value（而不是ko.observable 或ko.observableArray），因此您只为第二个输入设置了一个时间值设置器。 （为了证明这一点，请在 ko.applyBindings(viewModel); 之后的脚本末尾添加 viewModel.deck({"Name":"updated test"});）
2. deckName 是一种单向绑定 - 它是在初始 applyBindings 期间编写的，viewModel 将通过用户或脚本对 <input> 所做的更改进行更新。但是，如果您对 viewModel 进行编程更改，您的输入字段将不会更新以匹配。你会想看看 Knockout.js 的最后一部分value binding documentation。

稍微改进的版本：

<form data-bind="submit: save">
    <input type="text" data-bind="value: deckName" />
    <input type="text" data-bind="value: deck().Name" />
    <button type="submit">Go</button>
</form>
<script type="text/javascript">
    var initialData = {"Name":"test"};

    var viewModel = {
        deck: ko.observable(initialData),
        // Set up a two way binding
        deckName: ko.observable(initialData.Name),
        // Set up a one time value setter
        save: function() {
            ko.utils.postJson(location.href, ko.toJSON(this));
            // When we save the model we post *it* back, rather than
            // serializing it by hand.
        }
    };
    ko.applyBindings(viewModel);
    viewModel.deck({"Name":"updated test"});
</script>

使用fromJS的替代版本：

<form data-bind="submit: save">
    <input type="text" data-bind="value: Name" />
    <button type="submit">Go</button>
</form>
<script type="text/javascript">
    var initialData = {"Name":"test"};

    var viewModel = ko.mapping.fromJS(initialData);
    viewModel.save = function() {
        ko.utils.postJson(location.href, ko.toJSON(this));
        // When we save the model we post *it* back, rather than
        // serializing it by hand.
    }
    ko.applyBindings(viewModel);
</script>

您需要查看 Knockout 的 fromJSON 和 fromJS 功能（在其 mapping plugin 中实现）。