为映射中的每个对象添加计算答案

【问题标题】：Add computed for each object in mapping为映射中的每个对象添加计算
【发布时间】：2013-05-16 20:59:53
【问题描述】：

我的应用程序中有以下视图模型：

var DashboardVM = function (serverData) {
    var self = this;
    self.tiles = ko.mapping.fromJS(serverData);
    self.someotherproperties
    ...
};
var tileData = @Html.Raw(Json.Encode(Model.Tiles));
var dashboardVM = new DashboardVM(tileData);
ko.applyBindings(dashboardVM);

我想为self.tiles 中的每个项目添加一个 ko.computed 函数。我在网上看到一些例子表明这是可能的，但我不太清楚这样做的正确语法。

【问题讨论】：

标签： knockout.js knockout-mapping-plugin

【解决方案1】：

通过查看文档，您应该能够将一些映射选项传递给映射插件，以自定义 tiles 项目的创建。在不了解您的数据结构的情况下，很难给出示例，但这可能对您有用：

var mapping = {
    'tiles' : {
        create: function(options) {
            return new specialTiles(options.data);
        }
    }
}

var specialTiles = function(data) {
    ko.mapping.fromJS(data, {}, this);

    this.tileSize = ko.computed(function() {
        return this.tileLength * 2;
    }, this);
}

现在，当您进行映射时，传递映射选项：

ko.mapping.fromJS(serverData, mapping, this.tiles);

【讨论】：

【解决方案2】：

如果 serverData 是一个数组，你可以这样做。如您所见，我添加了一个名为 comp 的计算属性，它返回基于 title 属性的文本。

var DashboardVM = function (serverData) {
    var self = this;
    self.titles = ko.mapping.fromJS(serverData);
    for(var index =  0; index<self.titles().length; index++) {
        var item = self.titles()[index];
        item.comp = ko.computed(function(){
            return 'new' +item.title()
        });
    }
};
//var tileData = @Html.Raw(Json.Encode(Model.Tiles));
var titleData = [{title :'t1'}, {title :'t2'}, {title :'t3'}]
var dashboardVM = new DashboardVM(titleData);
ko.applyBindings(dashboardVM);


<div data-bind="foreach:titles">
    <span data-bind="text:title">
    </span>    
    <span data-bind="text:comp">
    </span>
    <br/>
</div>

See fiddle

希望对你有帮助。

【讨论】：