javascript - Windows Store App (Winjs) - Template Selector (Dual Template) -
i need grouped listview has 2 types of templates, i've reached this:
employee.html:
<div id="dualtemplate" data-win-control="winjs.binding.template" style="display: none;"> <div class="dualtext" data-win-control="mvvmjs.ui.templateselector" data-win-bind="wincontrol.model:self mvvmjs.binding.wbind" data-win-options="{ selector: { type: mvvmjs.ui.templateselector.propertyselector, property: 'documenttypecode', pattern: 'html/employee/employee.html#{0}',} }"> </div> </div> <div data-templateid="receipts" data-win-control="winjs.binding.template"> <div class="receipts"> <h4 data-win-bind="innertext: filename"></h4> <h6 data-win-bind="innertext: year"></h6> <h6 data-win-bind="innertext: month"></h6> </div> </div> <div data-templateid="adeclaration" class="dualtext adeclaration" data-win-control="winjs.binding.template"> <div class="adeclaration"> <h4 data-win-bind="innertext: filename"></h4> <h6 data-win-bind="innertext: year"></h6> </div> </div> <div id="listviewdocs" class="win-listview" data-win-control="winjs.ui.listview" data-win-options="{ itemtemplate: dualtemplate, groupheadertemplate: select('#headerdocslisttemplate') }"> </div> the data coming web service, here data "viewmodel"
for (var ir = 0; ir < employeedata[0][0].employeedocuments.length; ir++) { var dataitem = employeedata[0][0].employeedocuments[ir]; employeedocumentslist.push({ employeeid: dataitem.employeeid, contenttype: dataitem.contenttype, filename: dataitem.filename, month: dataitem.month, year: dataitem.year, payrollcode: dataitem.payrollcode, payrollperiod: dataitem.payrollperiod, documenttypecode: dataitem.documenttypecode }); } var documentsgroupeditems = employeedocumentslist.creategrouped( function (dataitem) { return dataitem.documenttypecode; }, function (dataitem) { return { documenttypecode: dataitem.documenttypecode }; }, function (group1, group2) { return group1.charcodeat(0) - group2.charcodeat(0); } ); winjs.namespace.define("employeedocumentdata", { items: documentsgroupeditems, groups: documentsgroupeditems.groups }); var listviewdocs = element.queryselector("#listviewdocs").wincontrol; listviewdocs.selectionmode = winjs.ui.selectionmode.none; listviewdocs.layout = new winjs.ui.gridlayout({ horizontal: true }); listviewdocs.itemdatasource = employeedocumentdata.items.datasource; listviewdocs.groupdatasource = employeedocumentdata.items.groups.datasource; the data source employeedocumentdata, wich working 1 general template.
right now, isn't working, appears grouped data without template definition there wasn't template.
obs: took na exemple internet , don't know if need pick mvvmjs somewhere because site didn't said that.
---------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------
ok, found way change template i'm stuck... innertext ins't binding, help?
html:
<div id="receipts" class="receipts" data-win-control="winjs.binding.template"> <h4 data-win-bind="innertext: filename"></h4> <h6 data-win-bind="innertext: year"></h6> <h6 data-win-bind="innertext: month"></h6> </div> <div id="adeclaration" class="dualtext adeclaration" data-win-control="winjs.binding.template"> <h4 data-win-bind="innertext: filename"></h4> <h6 data-win-bind="innertext: year"></h6> </div> <!-- data-win-options="{itemdatasource: employeerelativedata.employeerelativeinfo.datasource, automaticallyloadpages:true, itemtemplate:smalllisticontexttemplate, loadingbehavior:'randomaccess', layout:{type:winjs.ui.listlayout}, selectionmode:'none', swipebehavior:'none', tapbehavior:'none'}"> --> <div id="listviewdocs" class="win-listview" data-win-control="winjs.ui.listview" data-win-options="{ groupheadertemplate: select('#headerdocslisttemplate') }"> </div> js:
itemtemplatedocs: winjs.utilities.marksupportedforprocessing(function (itempromise) { return new winjs.promise(function (complete, error) { return itempromise.then(function (currentitem) { var item = currentitem.data.documenttypecode; var template; // base template on type of data if (item == "receipts") { template = document.getelementbyid("receipts").wincontrol; } else { template = document.getelementbyid("adeclaration").wincontrol; } template.render(item).then(function (element) { complete(element); // allow additonal manipulation after element rendered // , binding finished }, function (e) { error(e); }); }); }); }), var listviewdocs = element.queryselector("#listviewdocs").wincontrol; listviewdocs.selectionmode = winjs.ui.selectionmode.none; listviewdocs.layout = new winjs.ui.gridlayout({ horizontal: true }); listviewdocs.itemdatasource = employeedocumentdata.items.datasource; listviewdocs.groupdatasource = employeedocumentdata.items.groups.datasource; listviewdocs.itemtemplate = this.itemtemplatedocs;
it have 1 single div child of winjs.binding.template. remember reading when started winjs dev work. since then, follow pattern when defining listview templates. example:
<div id="receipts" class="receipts" data-win-control="winjs.binding.template"> <div class="receipt-item"> <h4 data-win-bind="innertext: filename"></h4> <h6 data-win-bind="innertext: year"></h6> <h6 data-win-bind="innertext: month"></h6> </div> </div> how know innertext binding issue? see listview items rendering without content?
Comments
Post a Comment