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>
<input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'" />
<p id="target">
    Hello <span data-bind="text: name, visible: nameVisible"></span>
</p>
<input type="checkbox" data-bind="checked:nameVisible">
<button data-bind="click: changeName">
  Change name
</button>

JavaScript

var namesArr = [{name:"Bob"}, {name: "Peter"}, {name: "Sue"}];
var viewModel = {
	name: ko.observable("Bob"),
  changeName: function() {
  	this.name("Steve");
  },
  nameVisible: ko.observable(true),
  arr: ko.observableArray(namesArr),
  addItem: function() {
  	this.arr.push({name:'Jack'})
  }
}

ko.applyBindings(viewModel);