How to use KnockoutJS with Observable nested array?

Question

i'm new to knockoutJs, and now i've got a problem, my code is here:

ViewModel:

var projectModel = {
dateProject: ko.observableArray()
};

ko.applyBindings(projectModel, document.getElementById('projectShow'));

HTML:

<div id="projectShow">
    <!-- ko foreach: dateProject -->
    <span data-bind="text:createDay"></span>
    <ul>
        <!-- ko foreach: projectList -->
        <li>
        </li>
        <!-- /ko -->
    </ul>
    <!-- /ko -->
</div>

<a id="add" href="javascript:void(0)" target="_self">an button</a>

A click event

$('#add').click(function(){
    projectModel.dateProject().length = 0;
    var projectItems = [
        {
            createDay:'2014/03/16',
            projectList:[
                {   
                    checkResult: "good",
                    labelArr: ['hello','world']
                },{ 
                    checkResult: "general",
                    labelArr: ['hi','world']
                }
            ]
        },{
            createDay:'2014/03/17',
            projectList:[
                {   
                    checkResult: "good",
                    labelArr: ['hello','world']
                },{ 
                    checkResult: "general",
                    labelArr: ['hi','world']
                }
            ]
        }
    ]

    foreach(var i = 0;i<projectItems.length;i++){
        projectModel.dateProject().push(projectItems[i])
    }
});

When the click event is trigger, i clear the model's root array(observableArray), and push some new items to it, but the ui doesn't update automatically, can anybody tell me what's problem with the code? Perhaps knockout-mapping-plugin can solve this problem, but i don't know how.

Any help will be appreciated.

Answer 1

There are some little mistakes you have like syntax of forloop is wrong and to clear root array use removeAll function. it should be like:-

projectModel.dateProject.removeAll();//clear root array
for(var i = 0;i<projectItems.length;i++){
    projectModel.dateProject.push(projectItems[i]) //don't use  '()'  with projectModel.dateProject
}

Add data-binding for nested observable array in view.

<div id="projectShow">
  <!-- ko foreach: dateProject -->
   <span data-bind="text:createDay"></span>
   <ul>
     <!-- ko foreach: projectList -->
       <li data-bind="text:checkResult"></li>
       <li data-bind="text:labelArr"></li>
     <!-- /ko -->
  </ul>
 <!-- /ko -->
</div>

Fiddle Demo