Function Binding & JSON Load & KO

by gurkavcu

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/knockout.mapping.js"></script>
<div data-bind="with:listModel">
    <div> <a href="#" data-bind="click : function() {add();}">ADD</a>
          <a href="#" data-bind="click : function() {save();}">SAVE</a>  
    </div>
    <div data-bind="foreach: items" id="container">
        <div  style="clear:both">
            <div style="width:50px;float:left;text-align:right">
                <span id="A" data-bind="text: id"></span>
                <span id="B" data-bind="text: name"></span>
            </div>        
            <div style="float:left;padding-left:5px">
           <img data-bind=" click : function(){ $parent.remove($data);} " src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/16/Status-user-busy-icon.png" >
           </img>
        <a class="test" data-bind="event:{ click : $parent.test} ,text:'TEST'"></a>
        </div>
      
    </div>
</div>

CSS

.remove {
    background:url();
   
}

JavaScript

function Item(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
}

var data = [new Item(1, 'Bir'),
                new Item(2, 'İki'),
                new Item(3, 'Üç'),
                new Item(4, 'Dört'),
                new Item(5, 'Beş')]


var ListModel = function() {    
    var self = this;
    this.items  = ko.observableArray();
    this.remove = function(data, parent) {
        self.items.remove(data);
    };
    this.add    = function() {
        self.items.push(new Item(6, "Altı"));
    };
    this.test   = function(data, e) {
        console.log(data);
    };
    this.save   = function() {        
        console.log(ko.mapping.toJS(self.items));
    };   
}

function ViewModel() {
     this.listModel = new ListModel();
};

var viewModel = new ViewModel();

$(function() {
    $.post("/echo/json/", {
        json: $.toJSON(ko.mapping.toJS(data))
    }, function(data) {           
        viewModel.listModel.items = ko.mapping.fromJS(data);
        ko.applyBindings(viewModel);
    });

    setTimeout(function(e) {
        //viewModel.items()[0].id(10);
        //viewModel.items()[0].name("On");
    }, 3000); 
})