从对象无法更新视图模型

Question

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

使用knockout 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它是静态值(与a ko.observable或a 相对ko.observableArray).(为了证明这个添加viewModel.deck({"Name":"updated test"});到你的脚本结束之后ko.applyBindings(viewModel);)
2. deckName是一种单向绑定 - 它是在初始时编写的applyBindings,viewModel并将通过用户或脚本所做的更改来更新<input>.但是,如果对viewModel输入字段进行编程更改,则不会更新以匹配.您将要查看Knockout.js的值绑定文档的最后一部分.

略有改进的版本:

<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和fromJSfuncitons(在它的映射插件中实现).