我需要一个具有两种类型模板的分组列表视图，我已经达到了这一点：
员工.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>
数据来自 Web 服务，但这里是来自“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;
数据源是 EmployeeDocumentData，它使用一个通用模板。
现在，这不起作用，它只显示没有模板定义的分组数据，就像没有任何模板一样。
OBS：我从互联网上拿了一个例子，我不知道我是否需要从某个地方挑选 MvvmJ，因为该网站没有说任何关于这一点的内容。
-------------------------------------------------- ------------------------------------------
-------------------------------------------------- ------------------------------------------
好的，我找到了一种更改模板的方法，但现在我被卡住了...... innerText 没有绑定，有什么帮助吗？
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 the template on the 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 for some additonal manipulation after the element is rendered
// and binding is 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;