Why TypeError after adding properties to an observable object in knockout.js?

Question

I was playing around with building a custom handler which adds new observableArray-properties to parts of MyViewModel to make sure the nested templates within elements bound by my handlers would always have the right arrays - see jsfiddle for full example.

<div data-bind="contentAvailable: ['children','pos1']">
    <div data-bind="template: { name: 'default', foreach: children().pos1 }">
</div>

Within the handler I checked if the current object bindingContext.$data had an observable object as a property with the name as valueAccessor()[0] (in my example 'children') and if that observable object in turn had an observable array of it's own with the name valueAccessor()[1] ('pos1') - and in case of absence I would assing them.

At first I tried valueHasMutated() and reseting the observable as shown here

//within the handler
bindingContext.$data[valueAccessor()[0]]()[valueAccessor()[1]]=ko.observableArray([]);
//and after ko.applyBindings(MyViewModel) 
child1.children().pos1().push(new ViewChild(2));
child1.children().pos1.valueHasMutated();

This almost-worked - since I didn't want to notify about mutation every time I push a value I tried to place the valueHasMutated() within the handler - after adding the observableArray() but that would result in Uncaught TypeError: object is not a function (tho typeof 1 line above says otherwise XD ).

Am I using those object refrences in a fundamentally wrong way or just lacking some understanding in how knockout does it's magic? :D

Answer 1

Still kind of digesting what you are trying to do, but noticed that you do have a typo where you have i(1) instead of i[1] in the typeof check in your binding handler:

if(!bC.$data[i[0]]().hasOwnProperty(i[1]) || typeof bC.$data[i[0]]()[i(1)] !== 'function'){           
        var existing = bC.$data[i[0]]();