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”按钮之前更改文本框值。

然后按“退出”按钮。结果是数组初始值，而不是新值。

请告诉我我错过了什么。

Answer 1

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

Answer 2

我正在对现有代码进行一些更改，因为您直接绑定了通过$data在observableArray中查看的普通数组。

查看型号：

//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>

工作小提琴 here

KnockoutJs数组绑定

2 个答案: