繁体   English   中英

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

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

我有以下内容:

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

但是,我无法使“卡”绑定正常工作-除非删除“创建”方法,否则无法到达该代码。 我正在尝试从淘汰赛站点中获取示例:

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时出现的错误:

未捕获的错误:无法解析绑定。 消息:TypeError:对象没有方法“编辑”; 绑定值:可见:!$ 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

这里查看更新的小提琴

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM