JSFiddle - React, Tailwind, and code Playground

by Sourabh Tewari

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-bind="myBinding: someArrayOfItems"></div>
<br/><button data-bind="click: addNew">add</button>



<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

JavaScript

function Item(txt) {
    var self = this;
    self.txt = ko.observable(txt);
}

ko.bindingHandlers.myBinding = {
    init: function(element, valueAccessor) {
        var ul = document.createElement("ul"),
            data = valueAccessor();

        var div = document.createElement("div");
        element.appendChild(div);
        ko.applyBindingsToNode(div, { text: ko.computed(function() { return data().length }) });
        
        element.appendChild(ul);
        ul.innerHTML = "<li><input type='text' data-bind='value: txt' /></li>";
        ko.applyBindingsToNode(ul, { foreach: data });

        return { controlsDescendantBindings: true };
    },

    update: function(element, valueAccessor) {

    }
};

ko.applyBindings({
    someArrayOfItems: ko.observableArray(
        [new Item('item1'), new Item('item2'), new Item('item3')]),
    addNew: function() {
        this.someArrayOfItems.push(new Item('new_item'));

    }
});