Basic knockout

Basic Knockout with Basic Observables

by XstreamINsanity

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
Name: <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'">
<input type="checkbox" data-bind="checked: nameVisible" />
<p>
  Hello, <span data-bind="text: name, visible: nameVisible"></span>
  <br />
  <span data-bind="text: displayName"></span>
</p>
<button data-bind="click: changeName">
Change Name
</button>

JavaScript

$(function() {
	var viewModel = {
  	name: ko.observable("bob"),
    nameVisible: ko.observable(true),
    changeName: function() {
    	this.name("steve");
    }
  };
  
  viewModel.displayName = ko.computed(function (){
  	return this.name() + " is" + (!this.nameVisible() ? " not" : "") + " visible.";
  }, viewModel);
  
  ko.applyBindings(viewModel);
})