KO example

by benjamine

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<html>
    <head>
    </head>
<body>
<div>
     <fieldset>
         <label for="name">Name:</label> <input type="text" id="name" name="name" data-bind="value: name, valueUpdate: 'afterkeydown'"><br/>
    </fieldset>        
    <span data-bind="text: name">(NAME)</span>
    <ul>
        <li data-bind="dynlist: friends">
            <span data-bind="text: name">(NAME)</span> has
            <span data-bind="text: age">(AGE)</span>
            <input type="button" data-bind="click: function(){
                this.age(this.age()+1);
                this._parent.remove(this);
            }" value="remove">
        </li>
    </ul>
</div>
</body>
</html>

JavaScript

ko.bindingHandlers.dynlist = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        var $elem = $(element);    
        var obsItems = valueAccessor();
        var items = valueAccessor()();
        
        var items_length = items.length;
        for (var i=0; i< items_length; i++){
            var e = $elem.clone()
                .attr('data-bind',null)
                .insertBefore($elem);
            e.css('background','yellow');
            try {
                items[i]._parent = obsItems;
                ko.applyBindings(items[i],e.get(0));
            }catch(err){
                e.text(err+'');
            }
        }
        $elem.hide();
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        alert('hola que tal');
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
    }
};

var data = {
    name: 'John Smith',
    friends: [
        {
        name: 'Pepe Sanchez',
        age: 32},
    {
        name: 'Mario López',
        age: 12},
    {
        name: 'Hugo Gutiérrez',
        age: 21},
        ]
}

var viewModel = ko.mapping.fromJS(data);

ko.applyBindings(viewModel);