Kendo MVVM Binding

Updating nested object binding

by toddanglin

HTML

<script src="http://htmlui.com/demos/kendo/learn/script/kendo.all.min.js"></script>
<div>
<h1 data-bind="text: name"></h1>
<h2 data-bind="text: currentSection.name"></h2>
<h3 data-bind="text: activeSection().name"></h3>
<button data-bind="click:nextSection">Next Section</button>
</div>
<p style="margin-top:50px;display:block;">
    PROBLEM: Why doesn't the first "Section 1" change when "Next Section" is clicked?
</p>

JavaScript

var data = {
    name: "Test Top Level",
    sections: [
        {
        name: "Section 1"},
    {
        name: "Section 2"}
    ]
};

var vm = {
    _idx: 0,
    currentSection: data.sections[0],
    activeSection: function(){
      return this.sections[this.get("_idx")];  
    },
    nextSection: function(){       
       if(this._idx >= this.sections.length - 1) return;
       
       console.log("START", this.currentSection);            
       
       this.set("_idx", this._idx + 1);
       this.set("currentSection", this.sections[this._idx]);
        
       console.log("END", this.currentSection);
    }        
};
          
$.extend(vm, data);       

kendo.bind(document.body.children, kendo.observable(vm));