knockout - simple binding

by Rishi Gautam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://fonts.googleapis.com/css?family=Krona+One"></script>
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">

<div class='btn' data-bind='text: btn1.title, click:btn1.click'></div>
<div class='btn' data-bind='text: btn2.title, click: btn2.click'></div>
<div class='btn' data-bind='text: btn3.title, click:btn3.click'></div>

CSS

.btn {
  font-family: 'Mina';
  border-style: solid;
  border-width: 2px;
  padding: 0 5px 0 5px;
  display: inline-block;
  min-width: 50px;
  text-align: center;
}

.btn:hover {
  background-color: black;
  color: white;
  cursor: pointer;
  border-color: black;
}

JavaScript

var btnModel = function(title) {
	_self = this;
  
	this.title = title;
  
  this.click = function(model, evt) {
  	console.log('click ', _self);
  }
}

var model = {};

model.btn1 = new btnModel('lemon');
model.btn2 = new btnModel('pear');
model.btn3 = new btnModel('banana');

ko.applyBindings(model);