弹出窗口内的ListView（HTML / JavaScript） [英] ListView inside a Flyout (HTML / JavaScript)

问题描述

我想在弹出窗口中包含动态生成的ListView格式化内容，我已从应用栏中的按钮弹出。

I'd like to include dynamically-generated ListView formatted content in a Flyout I have popping out from a button in the App Bar.

我目前正在使用我团队中其他程序员在其他地方成功使用过的ListView格式，但是没有人在Flyout中尝试过它。 

I'm currently using the same ListView format that other programmers on my team have used successfully elsewhere, but nobody's tried it inside of a Flyout yet. 

我正在尝试尽可能多地保留HTML（与JavaScript相同）的Flyout管理。 任何建议都将非常感谢。 谢谢！

I'm trying to keep as much Flyout management in HTML (vs. JavaScript) as possible.  Any advice would be very much appreciated.  Thank you!

<div id="refiners_flyout" 
    data-win-control="WinJS.UI.Flyout">
    <div id="refiners_view" aria-label="List of refiners" 
        data-win-control="WinJS.UI.ListView"
        data-win-options="{selectionMode: 'multi', 
            itemTemplate: select('#refiner_template'), 
            layout: {type: WinJS.UI.GridLayout}}" 
            data-bind="winControl: {
                itemDataSource: ProductDetailsViewModel.refinerOptions,
                iteminvoked: RefinerInvokedHandler
                }">  
    </div>
</div>

<div id="refiner_template" 
    data-win-control="WinJS.Binding.Template">
    <div class="refiner_template_style" 
        data-win-bind="textContent: ViewModel.refinerOptions">
    </div>
</div>

推荐答案

您需要使用动态列表静态模板的实例

you need to use dynamic list template instate of the static one

在你的尝试中js

 yourListView.winControl.itemTemplate = itemTemplateFunction;


function itemTemplateFunction(itemPromise) {
        return itemPromise.then(function (item) {
            // Select either normal product template or on sale template
            var itemTemplate = document.getElementById("itemTemplate1");
            if (item.id==2) {
                itemTemplate = document.getElementById("itemTemplate2");
            };
 
            // Render selected template to DIV container
            var container = document.createElement("div");
            itemTemplate.winControl.render(item.data, container);
            return container;
        });
    }
 

您可以在html中构建项目模板或动态使用js

and you can build your item templates in html or using js on the fly

这篇关于弹出窗口内的ListView（HTML / JavaScript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！