Question

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

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函数。我在网上看到一些例子表明它是可能的，但是我无法弄清楚这样做的正确语法。

Answer 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);

Answer 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

我希望它有所帮助。

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

2 个答案: