使用弹出菜单更新 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 来使用弹出菜单中单击的按钮图像来更新我的应用栏上的按钮。我正在使用空白的 Windows 应用商店应用程序，因此所有内容都位于默认值中。(css/html/javascript)。

我尝试创建一个可以更新按钮的函数，然后将该函数添加到 app1 的事件侦听器中，以便单击它会更新 appbar 图像，但它不起作用。回顾结构不佳的列表（正如我所说，这只是暂时的权宜之计），有没有更好的方法来做这些，或者我需要按照我的想法去做，并为弹出窗口中的每个按钮添加一个事件侦听器菜单？

Answer 1

考虑使用WinJS.UI.ListView 控件作为浮出控件中的列表。如果您之前没有使用过列表视图，请参考quickstart sample。

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

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

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>