JSFiddle - React, Tailwind, and code Playground

by joshjs

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>

<ul data-bind="template: { name: 'listTempl', foreach: list }"></ul>

<script id="listTempl" type="text/html">
    <li data-bind="text:name"></li>
</script>

JavaScript

$(function() {
  var data = [ {name: "Bob"}, {name: "Joe"}, {name: "John"} ];
  
  var viewModel = {
      list: ko.observableArray(data),
      addItem: function() {
          this.list.push({name: "Steve"});
      },
      removeItem: function() {
          this.list.pop();
      }
  };
  
  ko.applyBindings(viewModel);
});