Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
  <script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>  
  
</head>
<body>
  
  <table id="rotatorList" width="100%" border="0" cellspacing="0" cellpadding="2">
  <tbody id="rotatorItems" data-bind="foreach: DataItems">
  <tr>
    <td style="width: 20px;">
      <input type="button" class="sel" value="Select" data-bind="click: selectItem" />
      <span data-bind="text: OrderId"></span>
    </td>
    <td style="width: 90%;" data-bind="text: ItemHtml"></td>
  </tr>
  </tbody>
</table>
  
</body>
</html>
 
var initialData = {
"Height":"250",
"Width":"200",
"Speed":"700",
"Pause":"4",
"ShowItems":"1",
"Animation":"fade",
"MousePause":"true",
"IsPaused":"false",
"Direction":"up",
"DataItems":[{
     "OrderId":1,
     "ItemHtml":"This is item 1"
  },{
     "OrderId":2,
     "ItemHtml":"This is item 2"
  },{"OrderId":3,
    "ItemHtml":"This is item 3"
  }]
};
 
var DataItem = function(data) {
        var self = this;
        ko.mapping.fromJS(data, {}, self);
        self.selectItem = function(){
          alert("item with id " + self.OrderId() + " clicked");
        }; 
    };
​
var viewModelMapping = {
    'DataItems': {
     create: function(options) {
            return new DataItem(options.data);
        }
    }
};
​
var ViewModel = function(data) {
    var self = this;
    ko.mapping.fromJS(data, viewModelMapping, self);
};
​
var vm = new ViewModel(initialData);
$(document).ready(function () {
    
    ko.applyBindings(vm);   
}); 
console.log(vm.DataItems()[0]); 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers