JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<div data-bind="foreach: collections" >
    <div>
        <span data-bind="text:name,click: $data.AddToCollectionB"></span>
        <div data-bind="foreach: collectionB" >
        <input type="text" data-bind="value: name">
        </div>                   
    </div>
</div>

JavaScript

var kt = kt || {};

kt.itemA= function(n) {
    var self = this;
    self.name = n.name;
    self.collectionB = ko.observableArray(n.colB);

    self.AddToCollectionB = function () {
    self.collectionB.push(kt.itemB({ name: 'test-nested sub item' }));
    alert(self.name);
    alert(self.collectionB().length);
    };
};

kt.itemB= function(n) {
    var self = this;
    self.name = ko.observable(n.name);
};

kt.vm= new (function() {
    var self = this;
    self.collections= ko.observableArray([new kt.itemA({name:'item 1', colB: [new kt.itemB({name:'sub-item'})]}),new kt.itemA({name:'item 2', colB: []})]);
});

ko.applyBindings(kt.vm);