Function Binding & JSON Load & KO

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.2/knockout.mapping.min.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="click : function(){ $parent.test($data); }  ,text:'CLICK ME LOOK CONSOLE'"></a>
        </div>
      
    </div>     
</div>
  <div style="clear:both;padding-top:10px">
         <span> Log : </span> <span data-bind="text:ko.mapping.toJSON($root.listModel.items)"></span>  </div>

CSS

.remove {
    background:url();
   
}

JavaScript

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

// Initial Data
var data = [new Item(1, 'One'),
                new Item(2, 'Two'),
                new Item(3, 'Three'),
                new Item(4, 'Four'),
                new Item(5, 'Five')]


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, "Six"));
    };
    this.test   = function(data, e) {
        console.log(data);
        console.log(data.name());
    };
    this.save   = function() {        
        console.log(ko.mapping.toJSON(self.items));
    };   
}

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

var viewModel = new ViewModel();

$(function() {
    $.post("/echo/json/", {
        // Data send to server and echo back
        json: JSON.stringify(ko.mapping.toJS(data))
    }, function(data) {           
        viewModel.listModel.items = ko.mapping.fromJS(data);
        ko.applyBindings(viewModel);
    });

    setTimeout(function(e) {
    }, 3000); 
})