在 knockout.js 的数组内创建可观察对象属性

Question

Knockout.js 文档说 observableArray

Simply putting an object into an observableArray doesn’t make all of that object’s properties themselves observable. Of course, you can make those properties observable if you wish, but that’s an independent choice.

但它没有指定如何使属性可观察。

我有一个 users 数组，我想让属性 name 可观察到能够在某些操作下从另一个视图模型更改它。

这是我尝试过但没有成功的方法：

Reproduction online

var shouter = new ko.subscribable();

function usersViewModel() {
    var myData = [array of objects];
    var self = this;
    self.selectedRow = ko.observable();
    self.items = ko.observableArray(myData);

    self.selectedRow.subscribe(function (newValue) {
        console.log(newValue);
        shouter.notifySubscribers(newValue, "selectedRow");
    });

}

function departmentViewModel() {
    var self = this;
    self.row = ko.observable();

    //getting info from another view model
    shouter.subscribe(function (user) {
        self.row(user);
        console.log(self.row());

        self.row().name = ko.observable('Testing!!!');
    }, this, "selectedRow");

}

var MasterViewModel = function () {
    this.users = new usersViewModel();
    this.department = new departmentViewModel();
}

var mm = new MasterViewModel();
ko.applyBindings(mm);

我该怎么做？

Answer 1

您应该创建一个 User class，其中 name 作为可观察的属性。

function User(userData) {
    userData = userData || {};
    this.id = userData.id;
    this.name = ko.observable(userData.name);
    this.status = userData.status;
}

function UsersViewModel() {    
    var myData = [{
        id: "001",
        name: "Jhon",
        status: "Single"
    }, {
        id: "002",
        name: "Mike",
        status: "Married"
    }, {
        id: "003",
        name: "Marrie",
        status: "Complicated"
    }];

    self.users = ko.observableArray(myData.map(function(userData) {
        return new User(userData);
    });
}

如果出于某种原因您想避免创建 User class，那么您需要以其他方式将 name 属性转换为可观察对象。像这样...

myData.forEach(function (data) {
    data.name = ko.observable(data.name);
});
self.users = ko.observableArray(myData);

在 knockout.js 的数组内创建可观察对象属性

Create observable object properties inside an array in knockout.js

knockout.js

knockout-3.0

knockout-3.2