Question

我正在使用Knockout并将可观察的集合绑定到标记。

如果我可以将一个计算函数添加到集合中的每个项目，那将会很棒，但我不确定如何在Knockout中正确执行此操作。

例如，给定此模型：

var model = {
    'persons' : [
        { firstName: "John", lastName: "Smith" },
        { firstName: "Sgt.", lastName: "Shiney-Sides" },
        { firstName: "Rusty", lastName: "Schacklefurt" }
    ]
};

ko.applyBindings(model);

我想添加一个fullName计算函数来连接名字和姓氏。

Answer 1

您可以使用Knockout Mapping plugin来实现此目的。

代码看起来像这样：

var model = {
    'persons' : [
        { firstName: "John", lastName: "Smith" },
        { firstName: "Sgt.", lastName: "Shiney-Sides" },
        { firstName: "Rusty", lastName: "Schacklefurt" }
    ]
};

// specifies the create callback for the 'persons' property
var mappingOptions = {
    'persons': {
        // overriding the default creation / initialization code
        create: function (options) {
            var Person = function () {
                this.fullName = ko.computed(function () {
                    return this.firstName() + ' ' + this.lastName();
                }, this);

                // let the ko mapping plugin continue to map out this object, so the rest of it will be observable
                ko.mapping.fromJS(options.data, {}, this);
            };
            return new Person();
        }
    }
};

model = ko.mapping.fromJS(model, mappingOptions);

ko.applyBindings(model);

Allen Rice感谢this solution。

Answer 2

@ jonathanconway的答案是正确的，但有点落后，对大型集合的内存使用很重，将类的声明从create方法中移出。

然后从创建函数中调用构造函数，如

create: function (options) {
   return new Person(options);
}

为了节省更多内存，您可以将计算机移动到原型声明。

如何将计算属性添加到集合？

2 个答案: