binding not working in knockout JS

Question

HTML code.

<ul id="cat-list" data-bind="foreach: catList()">
    <li data-bind="text: name, click: $parent.setCurrentCat"> </li>
</ul>
<div id="cat" data-bind="with: currentCat()">

    <h2 data-bind="text: name" id="cat-name"></h2>

    <div data-bind="text: clickCount" id="cat-count"></div>
    <img src="" data-bind="click: $parent.incrementCount, attr: {src: imgSrc}" id="cat-img" alt="cute cat">
    <h4>NickNames</h4>
    <ul data-bind="foreach: nickNames">
        <li data-bind="text: $data"></li>
    </ul>

</div>
<script src="js/lib/knockout-3.2.0.js"></script>
<script src="js/app.js"></script>

The JS code:

var ViewModel = function() {
     var self = this;

    this.catList = ko.observableArray([]);
    initialCats.forEach(function(catItem) {
        self.catList.push( new Cat(catItem) );
    });

    this.currentCat = ko.observable( this.catList()[0]);

    this.incrementCount = function(){
        self.currentCat().clickCount(self.currentCat().clickCount()+1);
    };
    this.setCurrentCat = function(cat) {

    self.currentCat = ko.observable(cat);
    console.log(self.currentCat);
}

var Cat = function(data) {
    this.clickCount = ko.observable(data.clickCount);
    this.name = ko.observable(data.name);
    this.imgSrc = ko.observable(data.imgSrc);
    this.imgAttribution = ko.observable(data.imgAttribution);
    this.nickNames = ko.observable(data.nickNames);
}

ko.applyBindings(new ViewModel())

The initialCats in ViewModel is an array with all cat information. An example element of catlist is

{
    clickCount: 0,
    name: 'Tabby',
    imgSrc: 'tabby.jpg',
    imgAttribution: 'Aman',
    nickNames: ['Tabtab', 'T-bone', 'Mr. T', 'Tabitha Tab Tabby']
}

Althouch clicking on the li elements change the current cat but the corresponding view is not rendered. And the default cat (the first cat) in only rendered. Did i miss something. ?

Answer 1

It's not working probably because you're overwriting currentCat observable instead of just updating the inner object inside setCurrentCat. So, change self.currentCat = ko.observable(cat) to self.currentCat(cat);

Here's a working snippet:

var initialCats = [{
  clickCount: 0,
  name: 'Tabby',
  imgSrc: 'https://s20.postimg.org/owgnoq5c9/cat_1.jpg',
  imgAttribution: 'Aman',
  nickNames: ['Tabtab', 'T-bone', 'Mr. T', 'Tabitha Tab Tabby']
}, {
  clickCount: 0,
  name: 'Tom',
  imgSrc: 'https://s20.postimg.org/f9d5f0ccp/cat_2.jpg',
  imgAttribution: 'Aman',
  nickNames: ['Tommy', 'Timmy']
}]

var ViewModel = function() {
  var self = this;

  this.catList = ko.observableArray([]);
  initialCats.forEach(function(catItem) {
    self.catList.push(new Cat(catItem));
  });

  this.currentCat = ko.observable(this.catList()[0]);

  this.incrementCount = function() {
    self.currentCat().clickCount(self.currentCat().clickCount() + 1);
  };
  this.setCurrentCat = function(cat) {
    // change here
    self.currentCat(cat);
  }
}
var Cat = function(data) {
  this.clickCount = ko.observable(data.clickCount);
  this.name = ko.observable(data.name);
  this.imgSrc = ko.observable(data.imgSrc);
  this.imgAttribution = ko.observable(data.imgAttribution);
  this.nickNames = ko.observable(data.nickNames);
}

ko.applyBindings(new ViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul id="cat-list" data-bind="foreach: catList()">
  <li data-bind="text: name, click: $parent.setCurrentCat"> </li>
</ul>
<div id="cat" data-bind="with: currentCat()">

  <h2 data-bind="text: name" id="cat-name"></h2>

  <div data-bind="text: clickCount" id="cat-count"></div>
  <img src="" data-bind="click: $parent.incrementCount, attr: {src: imgSrc}" id="cat-img" alt="cute cat">
  <h4>NickNames</h4>
  <ul data-bind="foreach: nickNames">
    <li data-bind="text: $data"></li>
  </ul>

</div>

Here's a working fiddle