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

问题描述

我希望能够观察视图模型内的对象.我有一个简单的示例，该示例无法正常工作，有人可以看到问题吗?

I want to be able to observe an object inside the view model. I have a simple example that doesn't work as expected, can anyone see the problem?

使用基因剔除1.1.1，有2个输入，例如:

Using knockout 1.1.1, have 2 inputs as such:

<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会更新.

When the page loads, the inputs get the default values, but on submitting the form viewModel.deck().Name is not updated but viewModel.deckName is.

<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将是相应的输入值.

On the form POST, deck will still send "test" no matter the input whilst deckName will be the corresponding input value.

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

What I really want is to be able to observe an object viewModel.deck and then bind its properties to inputs, but the properties don't get updated.

推荐答案

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

There are several problems with what you have provided.

1. 由于deck().Name是静态值(与ko.observable或ko.observableArray相对). (要证明这一点，请将viewModel.deck({"Name":"updated test"});添加到ko.applyBindings(viewModel);之后的脚本末尾)
2. deckName是一种单向绑定-在初始applyBindings期间编写，并且viewModel将通过用户或脚本对<input>的更改进行更新.但是，如果对viewModel进行编程更改，则输入字段将不会更新为匹配.您需要看一下Knockout.js的最后一部分值绑定文档.

1. You've only set up a one time value setter for your second input since deck().Name is a static value (as opposed to a ko.observable or a ko.observableArray). (To prove this add viewModel.deck({"Name":"updated test"}); to the end of your script after ko.applyBindings(viewModel);)
2. deckName is a one way binding - it's written during the initial applyBindings and viewModel will be updated by changes made by the user or scripts to the <input>. However, if you make programmatic changes to the viewModel your input field will not be updated to match. You'll want to take a look at the last part of 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>

您需要查看淘汰赛的 fromJSON 和 fromJS 功能(在其映射插件).

You'll want to look at Knockout's fromJSON and fromJS funcitons (implemented in its mapping plugin).

这篇关于从对象更新视图模型不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！