javascript - Windows ストア アプリ (Winjs) - テンプレート セレクター (デュアル テンプレート)

Question

2 種類のテンプレートを持つグループ化されたリストビューが必要です。これに到達しました。

従業員.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 で、1 つの一般的なテンプレートを使用していました。

現在、これは機能していません。テンプレートがないように、テンプレート定義なしでグループ化されたデータのみが表示されます。

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;