如何将 observableArray 属性与另一个 dom 元素绑定

Question

从 table 中的所有 'Full Name' 文本框到复选框列表实现 'one way binding' 的最佳方法是什么？

现在，通过单击“添加”按钮，它只会添加带有空文本框的新行。

JS:

function Person(id, fullname) {

    return { Id: id, FullName: fullname };
}  

    var FullName = function (fullname, checked) {

            var self = this;
            self.FullName = ko.observable(fullname);
            self.Checked = ko.observable(!!checked);

            self.Checked.subscribe(function () {
                alert(self.FullName() + " is " + self.Checked());
            });
        }

    function ViewModel() {

            var self = this;
            self.PersonArray = ko.observableArray([new Person("1", "Jackie CHAN")]);

            self.Names = ko.computed(function () {
                var arr = [];
                ko.utils.arrayForEach(self.PersonArray(), function (person) {

                    arr.push(new FullName(person.FullName, false));
                });

                return arr;
            });

            self.AddPerson = function () {

                self.PersonArray.push(new Person("", ""));
            };

            self.RemovePerson = function () {

                self.PersonArray.remove(this);
            };       
        }

        ko.applyBindings(new ViewModel());

谢谢。

Answer 1

不使用 Names 和 PersonArray 而是使用 PersonArray 并让 person 使用 observables。

function Person(id, fullname, checked) {
    var self = this;
    self.Id = ko.observable(id);
    self.FullName = ko.observable(fullname);
    self.Checked = ko.observable(checked);

    self.Checked.subscribe(function () {
        alert(self.FullName() + " is " + self.Checked());
    });
}  

function ViewModel() {

    var self = this;
    self.PersonArray = ko.observableArray([new Person("1", "Jackie CHAN", false)]);

    self.AddPerson = function () {

        self.PersonArray.push(new Person("", "", false));
    };

    self.RemovePerson = function () {

        self.PersonArray.remove(this);
    };       
}

ko.applyBindings(new ViewModel());

<div data-bind="foreach: PersonArray">
    <div>
        <input type="checkbox" data-bind="checked: Checked" />
        <label data-bind="text: FullName"></label>
    </div>
</div>

jsFiddle

如何将 observableArray 属性与另一个 dom 元素绑定

How to bind an observableArray properties with another dom element

knockout.js