How to add parent function to KnockOut double-nested mapping?
<p>I'm using KnockOut mapping fromJS to create my View Model from a JSON object like the following:</p>

<pre><code>{
    "cats": [{
        "name": "fluffy",
        "color": "brown",
        "kittens": [{
            "name": "spot",
            "color": "brown"
        }, {
            "name": "rascal",
            "color": "grey"
        }, {
            "name": "trouble",
            "color": "white"
        }]
    }, {
        "name": "kitty",
        "color": "red",
        "kittens": [{
            "name": "lady",
            "color": "red"
        }, {
            "name": "skat",
            "color": "striped"
        }]
    }]
}
</code></pre>

<p><strong>html:</strong></p>

<pre><code>&lt;div data-bind="foreach:cats"&gt;
    &lt;span data-bind="text:name"&gt;&lt;/span&gt;
    &lt;table&gt;
        &lt;tr data-bind="foreach: kittens"&gt;
             &lt;td data-bind="text:name"&gt;&lt;/td&gt;
             &lt;td data-bind="text:color"&gt;&lt;/td&gt;
             &lt;td&gt;&lt;a data-bind="click: $parent:showParentColor" href="#"&gt;Parent Color&lt;/a&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>var KittenModel = function (data) {
    ko.mapping.fromJS(data, {}, this);

    // ... various computed values added to this
}

var mapping = {
    'kittens': {
        create: function(options) {
            return new KittenModel(options.data);
        }
    },
    'otherItem': {
        create: function(options) {
             return ('otherStuff');
        }
     }
}

var data = { ... }; // the JSON above

var CatsViewModel = ko.mapping.fromJS(data, mapping);
</code></pre>

<p><strong>Question:</strong></p>

<p>Where and how do I put the showParentColor() function so that the the data-bind works in the kitten table? For example:</p>

<pre><code>function showParentColor(cat) {
    alert(cat.color);
}
</code></pre>

<p>Thanks!</p>