winjs - Nested ListView or Nested Repeater -
i trying created nested repeater or nested list view using winjs 4.0, unable figure out how bind data source of inner listview/repeater.
here sample of trying (note control repeater, prefer):
html:
<div id="mylist" data-win-control="winjs.ui.listview"> <span data-win-bind="innertext: title"></span> <div data-win-control="winjs.ui.listview"> <span data-win-bind="innertext: name"></span> </div> </div>
js:
var mylist = element.queryselector('#mylist).wincontrol; var mydata = [ { title: "line 1", items: [ {name: "item 1.1"}, {name: "item 1.2"} ] }, { title: "line 2", items: [ {name: "item 2.1"}, {name: "item 2.2"} ] } ]; mylist.data = new winjs.binding.list(mydata);
when try this, nothing renders inner list. have attempted trying use answer nested repeaters using table tags , 1 winjs: nested listviews still seem have same problem , hoping little less complicated (like knockout).
i know mentioned winjs doesn't support nested listviews, seems few years ago , hoping still not issue.
update
i able nested repeater work correctly, kraig's answer. here code looks like:
html:
<div id="mytemplate" data-win-control="winjs.binding.template"> <div <span>bucket:</span><span data-win-bind="innertext: name"></span> <span>amount:</span><input type="text" data-win-bind="value: amount" /> <button class="removebucket">x</button> <div id="bucketitems" data-win-control="winjs.ui.repeater" data-win-options="{template: select('#mytemplate')}" data-win-bind="wincontrol.data: lineitems"> </div> </div> </div> <div id="budgetbuckets" data-win-control="winjs.ui.repeater" data-win-options="{data: data.buckets,template: select('#mytemplate')}"> </div>
js: (after "use strict" statement)
winjs.namespace.define("data", { buckets: new winjs.binding.list([ { name: "a", amount: 5, lineitems: new winjs.binding.list( [ { name: 'test item1', amount: 50 }, { name: 'test item2', amount: 25 } ] ) } ]) })
*note answers part of question, however, after repo call , set repeater data source programmatically. going keep working towards , if post accepted answer.
the html repeater control sample windows 8.1 has example in scenario 6 nested repeater, , in case repeater created through template control. that's place start. (i discuss sample in chapter 7 of programming windows store apps html, css, , javascript, 2nd edition, starting on page 372, or 374 nested part.)
should still work winjs 4, though haven't tried it.
Comments
Post a Comment