使用 Knockout 映射插件在子数组的成员上定义计算的 observables答案

【问题标题】：Defining computed observables on members of child array using Knockout mapping plugin使用 Knockout 映射插件在子数组的成员上定义计算的 observables
【发布时间】：2013-03-24 19:19:42
【问题描述】：

我有以下：

// 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 时遇到的错误：

未捕获的错误：无法解析绑定。消息：类型错误：对象没有方法“编辑”；绑定值：可见：!$parent.editing()

【问题讨论】：

你能不能把小提琴放好让我们轻松一点？
刚刚加了一个，谢谢Ash

标签： javascript mvvm knockout.js

【解决方案1】：

您已经覆盖了视图模型的 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;
    }
};

updated fiddle

【讨论】：

哇，谢谢杰夫。这么简单的解决方案。如果您不介意，还有一个问题 - 对于 cardCount 方法，我应该使用 innerModel.cards() 还是 this.cards()？
那么您将无法使用this，因为您还没有将innerModel 作为第二个参数传入。如果你这样做了，那么你可以使用this。

【解决方案2】：

你不需要有括号。我刚从

!$parent.editing() 

 to 


!$parent.editing

查看更新的小提琴here

【讨论】：

做出这样的改变是错误的。 editing observable 从未创建过，因此试图从中获取值（通过调用它）失败。您提议的更改将逻辑从“如果未编辑卡片则可见”更改为“如果未定义编辑 observable 则可见”，这是不正确的。
@JeffMercado 是的，同意。感谢您的解释。
淘汰赛让我失望了...再次感谢大家的帮助
p.s.，如果! 不在里面就好了。如果表达式只是返回一个 observable，则敲除会自动解开该值。