Updating appbar button using flyout menu - html

Question

I have a question that is probably easy but I'm just overlooking.
So I've created an app bar with a single button on it that creates a flyout menu when pressed. The button is created so that it can hold an image.
<button class="app-button" style="-ms-high-contrast-adjust:none" data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'appButton',icon:'url(images/logo.png)',section:'global', type: 'flyout', flyout:select('#appFlyout')}">
</button>
On my flyout menu, I'm going to populate it with a list of items, but at the moment I've just hard coded a list of images, using CSS to supply an image to each button.
<div id="appFlyout" data-win-control="WinJS.UI.Flyout" aria-label="App Menu" style="visibility: visible;">
<ul class="appList" list-style-type: none style="width: 127.5px;">
<li id="app1List"><button id="app1" class="appButton"></button></li>
<li id="app2List"><button id="app2" class="appButton"></button></li>
<li id="app3List"><button id="app3" class="appButton"></button></li>
<li id="app4List"><button id="app4" class="appButton"></button></li>
<li id="app5List"><button id="app5" class="appButton"></button></li>
<li id="app6List"><button id="app6" class="appButton"></button></li>
</ul>
</div>
For the short term, I just need a way through my JavaScript to update the button on my appbar with the image of the button clicked in the flyout menu. I'm using the blank Windows Store App, so everything is located in default.(css/html/javascript).
I attempted to create a function that would update the button and then add that function to an event listener for app1 so that clicking it would update the appbar image but it wouldn't work. Looking past the poorly constructed list (as I said, it's just a stop gap for the moment), is there a better way to do those or do I need to do it how I thought and add an event listener to each button in the flyout menu?

Answer 1

Consider using WinJS.UI.ListView control for the list in the flyout. Refer a quickstart sample in case you have not used listview earlier.
It can be bound to an list with each item representing a button img. use iteminvoked event handler to set the selected button image, for the appbarcommand in the appbar.
below is not complete code. but part of the code, to give an idea.
var buttonFilePaths = [
{ iconFilePath: '/images/button1.png' },
{ iconFilePath: '/images/button2.png'},
{ iconFilePath: '/images/button3.png'}];
var list = new WinJS.Binding.List(buttonFilePaths);
// bind this list data source to the listview control.
listview.winControl.itemDataSource = list.dataSource;
// register for iteminvoked event when the item is tapped;
listView.addEventListern('iteminvoked', function (event)
{
var selectedIndex = event.detail.itemIndex;
var item = list.getAt(selectedIndex);
appButton.winControl.icon = item.iconFilePath;
});
html:
<div id='listview' data-win-control="WinJS.UI.ListView'
data-win-options="{ tapBehavior: 'invokeOnly', selectionMode: 'none', swipeBehavior: 'none'
, itemTemplate: select('#itemTemplate')}" >
</div>
<div id='itemTemplate' data-win-control='WinJS.Binding.Template'>
<div class='list-item'>
<img data-win-bind='src: iconFilePath' />
</div>
</div>