Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by gburca

HTML

<script src="https://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div data-bind="foreach: dots">
  x:<span data-bind="text: x"></span>
  y:<span data-bind="text: y"></span>
</div>
<script type="text/html" id="Dot">
  <circle data-bind="attr: {cx: x(), cy: y()}" r="5px" ></circle>
</script>
  
<svg width="350" height="150" stroke="#555" fill="#ddd">
  <rect x="0" y="0" width="250" height="150"></rect>
  <g data-bind="template: { name: 'Dot', foreach: dots }"></g>
</svg>

<svg width="350" height="150" stroke="#555" fill="#ddd">
  <rect x="0" y="0" width="250" height="150"></rect>
  <g data-bind="foreach: dots">
    <circle data-bind="attr: { cx: x(), cy: y()}" r="5px" ></circle>
  </g>
</svg>

JavaScript

// Here's my data model
var ViewModel = function() {
    this.dots = ko.observableArray([
    	{'x': ko.observable(50),
       'y': ko.observable(50)},
      {'x': ko.observable(100),
       'y': ko.observable(75)}
    ]);
};
 
ko.applyBindings(new ViewModel()); // This makes Knockout get to work