JSFiddle - React, Tailwind, and code Playground

by josekerekes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<button data-bind="click:addItem">
  add
</button>
<ul data-bind="template:{ name: listTemp1, foreach: arr }">

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

JavaScript

var namesArr = [{name:"Bob"}, {name: "Peter"}, {name: "Sue"}];
var viewModel = {
  arr: ko.observableArray(namesArr),
  addItem: function() {

  	this.arr.push({name:'Jack'})
  }
}

ko.applyBindings(viewModel);