Javascript Windows应用商店应用程序（Winjs）-模板选择器（双模板）

我需要一个分组的Listview，它有两种类型的模板，我已经做到了：

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>

---

最好将一个div作为WinJS.Binding.Template的子级。我记得在我开始winjs开发工作时读过这篇文章。从那时起，我在定义listview模板时总是遵循这种模式。例如：

<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>

您如何知道这是innerText绑定问题？是否看到listview项目呈现但没有内容

<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>

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;

<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>