js prototype 1

understanding context in prototype

by Rishi Gautam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<div class='btn' data-bind='text: btn1.title, click:function() {return btn1.click2($data)}'></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 {
  border-style: solid;
  border-width: 2px;
  display: inline-block;
  padding: 0 5px 0 5px;
}

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

JavaScript

var buttonModel = function(title) {
	var _self = this;
	this.title = title;
  this.click = function(m,e) {
  	console.log('clicked ', _self);
  }
  
  buttonModel.prototype.click2 = function(m, e) {
      console.log(_self);
  };
}

var model = {};

model.btn1 = new buttonModel('lemon');
model.btn2 = new buttonModel('pear');
model.btn3 = new buttonModel('grape');

ko.applyBindings(model);