Knockout - simple bindings

background-images etc.

by Rishi Gautam

HTML

<div id='main'>
  <div data-bind="text: text"></div>
  <img data-bind="attr: {src: imageUrl_uc4}, style: {event: {click: $root.onImageClicked}}" />
  <div class='sony_logo' data-bind="style: { backgroundImage: imageUrl_sonyFn('a','b', 'c')}, event: { click: $root.onImageClicked}"></div>
</div>

CSS

#main {
  width: 100%;
  height: 200px;
  background-color: #eee;
}

.sony_logo {
  width: 250px;
  height: 200px;
  background-color: #ddd;
}

JavaScript

//Playing with model with properties and functions.

var model = {
	text: 'Winter is coming',
  imageUrl_uc4: 'https://upload.wikimedia.org/wikipedia/en/0/01/Nathan_Drake_Uc4_full_body_shot.png',
  imageUrl_sony: "url(https://pbs.twimg.com/profile_images/418161175642128384/u24Glc4J.png)",
  imageUrl_sonyFn: function (a, b, c) {
  	console.log('received ', a+b+c);
    
    return this.imageUrl_sony;
  },
  onImageClicked: function(e) {
  	console.log('Nathan: Hi!');
  }
}

ko.applyBindings(model, document.getElementById('main'));