javascript - 如何使用 HTML/Javascript 替换 Windows 8 应用程序上应用栏中的按钮？

Question

我是使用 HTML/Javascript 开发 Windows 8 应用程序的新手。

我想动态创建/删除应用栏中的按钮。

例如，我在 html 中有以下 appbar div。

<div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement: 'top'}">
    <button id="button" data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'button', label:'Button', icon:'add'}" type="button">
    </button>
</div>

我想替换由某些操作触发的按钮，所以我所做的是在js中替换appbar div的innerHTML，如下所示，但我得到的是appbar中一个奇怪的空白方 block 。

var appbar = document.getElementById("appbar");
var html = "<button data-win-control=\"WinJS.UI.AppBarCommand\" data-win-options=\"{id:'button', label:'Another Button', icon:'add'}\" type=\"button\"></button>";
appbar.innerHTML = html;

感谢任何帮助。

谢谢

Answer 1

对应用栏的建议是提前定义所有命令并使用 hideCommands/showCommands显示和隐藏应用栏中的命令。

但是，如果您确实想自己动态创建命令，则只需在代码中再添加一个步骤即可:

WinJS.UI.process(elementThatYouJustCreated);

这将创建 win 控件，并完成获取该控件设置的所有工作。