使用Knockout映射插件在子数组的成员上定义计算可观察对象

Defining computed observables on members of child array using Knockout mapping plugin

本文关键字：定义 计算 对象 观察 成员 映射 Knockout 插件 数组 使用      更新时间：2023-09-26

我有以下内容:

// Child Array is Cards, trying to add computed observable for each child
var CardViewModel = function (data) {
    ko.mapping.fromJS(data, {}, this);
    this.editing = ko.observable(false); 
};
var mapping = {  
    'cards': {  // This never gets hit, UNLESS I remove the 'create' method below
        create: function (options) {
            debugger;
            return new CardViewModel(options.data);
        }
    },
    create: function(options) {
        var innerModel = ko.mapping.fromJS(options.data);
        innerModel.cardCount = ko.computed(function () {
            return innerModel.cards().length;
        });
        return innerModel;
    }
};
var SetViewModel = ko.mapping.fromJS(setData, mapping);
debugger;
ko.applyBindings(SetViewModel);

然而，我不能让'cards'绑定工作-除非我删除'create'方法，否则代码无法到达。我试着从敲除网站的例子:

http://knockoutjs.com/documentation/plugins-mapping.html

它们为子对象定义这样做:

var mapping = {
    'children': {
        create: function(options) {
            return new myChildModel(options.data);
        }
    }
}
var viewModel = ko.mapping.fromJS(data, mapping);

ChildModel定义如下:

var myChildModel = function(data) {
    ko.mapping.fromJS(data, {}, this);
    this.nameLength = ko.computed(function() {
        return this.name().length;
    }, this);
}

我花了一天的时间在这个问题上，但我怎么也弄不明白为什么这不起作用。任何建议都很棒。

编辑:这是我正在处理的一个小提琴。它只在结果中显示SIDE 1，因为这里无法识别"编辑":

<div data-bind="visible: !$parent.editing()" class="span5 side-study-box">
http://jsfiddle.net/PTSkR/1/

这是我在chrome中得到的错误，当我运行它:

未捕获错误:无法解析绑定。Message: TypeError: Object没有"编辑"方法;$parent.editing()

您已经覆盖了视图模型的create行为。映射插件不会为您调用属性的任何其他处理程序。因为你是从create方法中映射的，所以把你的cards处理程序移到那里。

var mapping = {  
    create: function(options) {
        var innerModel = ko.mapping.fromJS(options.data, {
            'cards': {
                create: function (options) {
                    debugger;
                    return new CardViewModel(options.data);
                }
            }
        });
        innerModel.cardCount = ko.computed(function () {
            return innerModel.cards().length;
        });
        return innerModel;
    }
};

更新小提琴

你不需要有括号。我刚从

!$parent.editing() 
 to 

!$parent.editing

查看更新后的小提琴在这里

相关文章：