KnockoutJs 数组绑定

Question

我的 knockoutjs 代码没有按预期工作。请查看 http://jsfiddle.net/x0vdo9kk/1/.

处的代码

// Define a "Person" class that tracks its own name and children, and has a method to add a new child
var Person = function(name, children) {
    this.name = name;
    this.children = ko.observableArray(children);

    this.addChild = function() {
        this.children.push("New child");
    }.bind(this);
}

// The view model is an abstract description of the state of the UI, but without any knowledge of the UI technology (HTML)
var viewModel = {
    people: [
        new Person("Annabelle", ["Arnie", "Anders", "Apple"]),
        new Person("Charles", ["Cayenne", "Cleopatra"])
    ],
    outcode: ko.observable(),
    showcode: function() {
        this.outcode(this.people[0].children())
    }
};

ko.applyBindings(viewModel);

而html是

<div class='liveExample'> 

    <h2>People</h2>
    <ul data-bind="foreach: people">
        <li>
            <div>
                <span data-bind="text: name"> </span> has <span data-bind='text: children().length'>&nbsp;</span> children:
                <a href='#' data-bind='click: addChild '>Add child</a>

            </div>
            <ul data-bind="foreach: children">
                <li>
                    <input data-bind="value: $data" />
                </li>
            </ul>
        </li>
    </ul>
    <div data-bind="text: outcode"></div>
    <button data-bind='click: showcode'>out</button> 
</div>

在按下 "out" 按钮之前更改文本框值。

然后按 "out" 按钮。结果是数组初始值，而不是新值。

请告诉我我错过了什么。

Answer 1

好吧，我对您现有的代码做了一些更改，因为您直接绑定了 observableArray 中的普通数组，以便通过 $data 查看。

查看模型：

//used to make plan array items observable's
function Name(val) {
    this.name = ko.observable(val);
}

var Person = function (name, children) {
    this.name = ko.observable(name);
    this.children = ko.observableArray();
    //mapping to make observable s 
    var oList = ko.utils.arrayMap(children, function (item) {
        return new Name(item);
    });
    this.children(oList);

    this.addChild = function () {
        this.children.push(new Name("New child"));
    }.bind(this);
}

var viewModel = function () {
    var self = this;
    self.people = ko.observableArray();
    self.people.push(new Person("Annabelle", ["Arnie", "Anders", "Apple"]), new Person("Charles", ["Cayenne", "Cleopatra"]));
    self.outcode = ko.observable("");
    self.showcode = function () {
       //reverse mapping returning plane array using `()` on observables
        var output = ko.utils.arrayMap(self.people()[0].children(), function (item) {
            return item.name();
        });
        self.outcode(output);
    }
};

ko.applyBindings(new viewModel());

视图：（更改了部分视图）

<ul data-bind="foreach: children">
            <li>
                <input data-bind="value:name" />
            </li>
        </ul>

工作fiddlehere

Answer 2

observableArray 跟踪数组中有哪些对象，而不是那些对象的状态，请参阅 documentation，因此您必须制作可观察的可观察数组。

var Person = function(name, children) {
this.name = name;
this.children = ko.observableArray(ko.utils.arrayMap(children,function(child){
    return ko.observable(child);
}));

this.addChild = function() {
    this.children.push(ko.observable("New child"));
}.bind(this);}

同样在 foreach 绑定中，如果您不想创建对象，您可以使用 $rawData 进行双向绑定

<ul data-bind="foreach: children">
<li>
    <input data-bind="value: $rawData" />
</li>

已更新JsFiddle demo

KnockoutJs 数组绑定

KnockoutJs array binding

knockout.js