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

Question

I have the following:

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

However I can't get the 'cards' binding to work - that code isn't reached unless I remove the 'create' method. I'm trying to follow the example from the knockout site:

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

They do this for the child object definition:

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

With the ChildModel defined like this:

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

    this.nameLength = ko.computed(function() {
        return this.name().length;
    }, this);
}

I've spent the past day on this and cannot for the life of me figure out why this isn't working. Any tips would be awesome.

EDIT: Here's a fiddle of what I'm working with. It's only showing SIDE 1 in the result because "editing" isn't recognized here:

<div data-bind="visible: !$parent.editing()" class="span5 side-study-box">

http://jsfiddle.net/PTSkR/1/

This is the error I get in chrome when I run it:

Uncaught Error: Unable to parse bindings. Message: TypeError: Object has no method 'editing'; Bindings value: visible: !$parent.editing()

Answer 1

You have overridden the create behavior for your view model. The mapping plugin will not call any of the other handlers for the properties for you. Since you're mapping from within the create method, move your cards handler in there.

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

Answer 2

you didnt needed to have parenthesis. I just changed from

!$parent.editing() 

 to 


!$parent.editing

See the updated fiddle here