使用弹出菜单更新appbar按钮

Question

我有一个问题，可能很容易，但我只是忽略了。

所以我创建了一个应用程序栏，上面有一个按钮，当按下它时会创建一个弹出菜单。创建按钮，以便它可以容纳图像。

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

在我的弹出式菜单上，我将用一个项目列表填充它，但目前我只是硬编码了一个图像列表，使用CSS为每个按钮提供图像。

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

在短期内，我只需要一种方式通过我的JavaScript来更新我的appbar上的按钮与在弹出菜单中单击按钮的图像。我使用空白的Windows Store应用程序，所以所有内容都位于默认值(css/html/javascript)。

我尝试创建一个函数来更新按钮，然后将该函数添加到app1的事件侦听器中，以便单击它将更新appbar图像，但它不起作用。看看这个构造糟糕的列表(正如我所说的，它只是暂时的权宜之计)，是否有更好的方法来实现这些，或者我是否需要按照我的想法来做，并为弹出菜单中的每个按钮添加一个事件侦听器?

Answer 1

考虑使用WinJS.UI.ListView控件作为弹出框中的列表。如果您以前没有使用过listview，请参考快速入门示例。

它可以绑定到一个列表，每个项目代表一个按钮img。使用iteminvoked事件处理程序为appbar中的appbar命令设置所选按钮图像。

下面的

不是完整的代码。但是代码的一部分，给一个想法。

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>