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>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js" type="text/javascript"></script>
  <script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js" type="text/javascript"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <div data-bind="foreach: Users">
    <p>Name: <input type="text" data-bind="value: Name" name="Name"></p>
    <p>Age: <input type="text" data-bind="value: Age" name="Name"></p>
  
    <p>Name: <span data-bind="text: Name"></span></p>
    <p>Age: <span data-bind="text: Age"></span></p>
  
    <select multiple="true" data-bind="options: $root.Colors, selectedOptions: ColorIds, optionsText: 'Name', optionsValue: 'ColorId'"></select>
  </div>
  <a href="#" data-bind="click: addUser">Add User</a><br/>
  <a href="#" data-bind="click: alertData">Alert User ViewModel</a>
</body>
</html>
 
​
 
​
// implement JSON.stringify serialization
JSON.stringify = JSON.stringify || function (obj) {
    var t = typeof (obj);
    if (t != "object" || obj === null) {
        // simple data type
        if (t == "string") obj = '"'+obj+'"';
        return String(obj);
    }
    else {
        // recurse array or object
        var n, v, json = [], arr = (obj && obj.constructor == Array);
        for (n in obj) {
            v = obj[n]; t = typeof(v);
            if (t == "string") v = '"'+v+'"';
            else if (t == "object" && v !== null) v = JSON.stringify(v);
            json.push((arr ? "" : '"' + n + '":') + String(v));
        }
        return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
    }
};
​
var viewModel = {
  Users: [
    {
      "Name":"JC",
      "Age":24,
      "ColorIds":[1, 2]
    },
    {
      "Name":"Albert",
      "Age":83,
      "ColorIds":[2]
    }
  ],
  Colors:[
    {"ColorId":1,"Name":"Red"},
    {"ColorId":2,"Name":"Blue"}
  ]
};
​
window.onload = function(){
  
  //document.writeln(data[0].Colors[0].Name);
  
  //if I map anything to ko.observable, it would be sent through ko.toJSON... so that means that Color stuff should NOT be mapped, especially because that's not what MVC is asking, but rather List<Colors>...
  
  viewModel.Users = ko.mapping.fromJS(viewModel.Users);
  
  
  viewModel.addUser = function(){
    var obsUser = ko.mapping.fromJS({
      Name: "Piet",
      Age: 3,
      ColorIds: []
    });
    viewModel.Users.push(obsUser);
  };
    
  alertData = function(){
    log('ok');
  };
  
  ko.applyBindings(viewModel);
  
};
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers