JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

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

JavaScript

ko.bindingHandlers.myBinding = {
    init: function(element, valueAccessor) {
        var ul = document.createElement("ul"),
            data = valueAccessor();
    
        //append a new ul to our element
        element.appendChild(ul);
        
        //could use jQuery or however you want to build the inner structure
        ul.innerHTML = "<li><span data-bind='text: $data'></span></li>";
        
        //apply foreach binding to the newly created ul with the data that we passed to the binding
        ko.applyBindingsToNode(ul, { foreach: data });;
        
        //tell Knockout that we have already handled binding the children of this element
        return { controlsDescendantBindings: true };
    }        
};

ko.applyBindings({
    someArrayOfItems: ko.observableArray(['item1', 'item2', 'item3'])
});