Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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>
<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>
  <p>Name: <input type="text" data-bind="value: Name" name="Name"></p>
  <p>Age: <input type="text" data-bind="value: Age" name="Name"></p>
  
  
  <select data-bind="options: FavoriteColors, optionsText: 'name', value: 'colorId', optionsCaption: 'Choose...'"></select>
  
</body>
</html>
 
var data = {
  'Name' : "Gena",
  'Age' : 32,
  'Colors' : [
    { 'ColorId' : 1, 'Name' : 'Red' },
    { 'ColorId' : 2, 'Name' : 'Blue' }
  ]
};
$(document).ready(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>...
    
  var Color = function (id, name) {
     var self = this;
     self.colorId = id;
     self.name = name;
  };
  
 function viewModel() {
    var self = this;
    self.Name = ko.observable("Bert");
    self.Age = ko.observable('12');
    self.FavoriteColors = ko.observableArray([
      new Color(1, "Blue"), 
      new Color(2, "Red"), 
      new Color(3, "White")
    ]);
  } 
  ko.applyBindings(new viewModel());    
});
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers