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>Knockout pre-rendered: foreachInit</title>
  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
  <script src="https://rawgit.com/ErikSchierboom/knockout-pre-rendered/master/dist/knockout-pre-rendered.js" type="text/javascript"></script>
</head>
<body>
  <ul data-bind="foreachInit: persons">
    <li data-template>
      <label>Name:</label>
      <span data-bind="text: name"></span>
      <br/>
      <label>Height:</label>
      <span data-bind="text: height"></span>cm
      <br/>
      <label>Date of birth:</label>
      <span data-bind="text: dateOfBirth"></span>
    </li>
    
    <li data-init>
      <label>Name:</label><span data-bind="init, text: name">Michael Jordan</span>
      <br/>
      <label>Height:</label>
      <span data-bind="init: { convert: parseInt }, text: height">198</span>cm
      <br/>
      <label>Date of birth:</label>
      <span data-bind="init: { convert: $root.parseDate }, text: dateOfBirth">February 17, 1963</span>
    </li>
    
    <li data-init>
      <label>Name:</label>
      <span data-bind="init, text: name">Larry Bird</span>
      <br/>
      <label>Height:</label>
      <span data-bind="init: { convert: parseInt }, text: height">206</span>cm
      <br/>
      <label>Date of birth:</label>
      <span data-bind="init: { convert: $root.parseDate }, text: dateOfBirth">December 7, 1956</span>
    </li>
    
    <li data-init>
      <label>Name:</label>
      <span data-bind="init, text: name">Magic Johnson</span>
      <br/>
      <label>Height:</label>
      <span data-bind="init: { convert: parseInt }, text: height">206</span>cm
      <br/>
      <label>Date of birth:</label>
      <span data-bind="init: { convert: $root.parseDate }, text: dateOfBirth">August 14, 1959</span>
    </li>
  </ul>
  
  <h3>Add new person</h3>
  
  <form class="form-horizontal col-sm-4" action="#">
    <ul>
      <li>
        <label>Name</label>
        <input class="form-control" type="text" data-bind="value: newName" placeholder="Name" />
      </li>
      <li>
        <label>Height</label>
        <input class="form-control" type="text" data-bind="value: newHeight"placeholder="Height" />
      </li>
      <li>
        <label>Date of birth</label>
        <input class="form-control" type="text" data-bind="value: newDateOfBirth"placeholder="Date of birth" />
      </li>
      <li>
        <button class="form-control" data-bind="click: addPerson">Add person</button>
      </li>
    </ul>
  </form>
  
  <p>View model:</p>
  <pre data-bind="text: ko.toJSON(viewModel)"></pre>
</script>
</body>
</html>
 
function PersonViewModel(name, height, dateOfBirth) {
  var self = this;
  
  self.name = ko.observable(name);
  self.height = ko.observable(height);
  self.dateOfBirth = ko.observable(dateOfBirth);
}
​
function ViewModel() {
  var self = this;
  
  self.persons = ko.observableArray();
​
  self.parseDate = function(value) {
    var date = new Date(Date.parse(value));
    return date.toLocaleDateString();
  };
  
  self.addPerson = function() {
    var newPerson = new PersonViewModel(
      self.newName(),
      self.newHeight(),
      self.newDateOfBirth());
    self.persons.push(newPerson);
  };
  
  self.newName = ko.observable();
  self.newHeight = ko.observable();
  self.newDateOfBirth = ko.observable();
}
​
var viewModel = new ViewModel();
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
viewModel.persons.push(new PersonViewModel());
​
ko.applyBindings(viewModel);
Output

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

Dismiss x
public
Bin info
ErikSchierboompro
0viewers