nested foreach

https://groups.google.com/d/topic/knockoutjs/J_PgZU2L5Nk/discussion

by donabrams

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
 <ul data-bind="template: {name: 'TopTemplate' , foreach: Sessions}"></ul> 
 <ul data-bind="template: {name: 'TopTemplate' , foreach: Sessions2}"></ul> 
<script type="text/html" id="TopTemplate">
    <li >    
        <p>${name}</p>
        <ul data-bind=" template: {name:  'NestedTemplate' , foreach: $data} " style="list-style-type:circle;margin-left:15px">
        </ul>
    </li> 

</script>
<script type="text/html" id="NestedTemplate">         
{{each(prop, val) $data}}
    {{if $.isArray( val ) }}
        <li>
            <b>${prop}</b>
            <ul  style="list-style-type:square;margin-left:15px" >  
        {{each(index, arrayVal) val}}
            {{each(i, mVal) arrayVal }}
                <li> 
                    <b>${i}</b>  ${mVal}
                </li>
            {{/each}}
        {{/each}}
    {{else}}
    <li><b>${prop}</b> : ${val}</li>
    {{/if}}
{{/each}}     
</script>

JavaScript

var Messages = function(m) {
    this.body = ko.observable(m.body);
};
var Session = function(a) {
    this.name = ko.observable(a.name);
    this.index = ko.observable(a.index);
    this.messages = ko.observableArray(a.messages);
};
var MySessions = ko.observableArray();
MySession.push(Session({name:"foo",index: 0, messages:[{body:"Hello foo 1"},{body:"Hello foo 2"}]}));
MySession.push(Session({name:"bar",index: 1, messages:[{body:"Hello foo 3"},{body:"Hello foo 4"}]}));

var viewModel;
setTimeout(function() {
    console.log("before:" + viewModel.Sessions()[0].name);
    MySessions[0].name("don");
    console.log("after:" + viewModel.Sessions()[0].name);
},1000);

viewModel = {
    Sessions : ko.observableArray([
        {name:"foo",index: 0, messages:[{body:"Hello foo 1"},{body:"Hello foo 2"}]},
        {name:"bar",index: 1, messages:[{body:"Hello foo 3"},{body:"Hello foo 4"}]}
    ]),
    Sessions2: MySessions
};
// ko magic...
ko.applyBindings(viewModel);