ListView inside a Flyout (HTML / JavaScript)

Question

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

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. 

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>

Answer 1

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

try this in you 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;
        });
    }
 

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