在 WinJS 中将 AppBarCommand 添加到 AppBar答案

【问题标题】：Add AppBarCommand to AppBar in WinJS在 WinJS 中将 AppBarCommand 添加到 AppBar
【发布时间】：2015-08-01 22:14:43
【问题描述】：

我需要以编程方式将AppBarCommand 添加到AppBar。这曾经适用于 Windows 8.1，但不适用于 Windows 10。我没有收到任何错误，但是当我执行以下代码时，我的应用程序栏是空的。有谁知道是否可以从 WinJS 动态地将AppBarCommands 添加到AppBar 中？如果是这样，怎么办？谢谢。

虽然我的问题发生在一个更大的现有应用程序中，但我从“空白”WinJS 模板中重现了该问题。

default.js：

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                var appBarDiv = document.createElement("div");
                document.body.appendChild(appBarDiv);
                var appBar = new WinJS.UI.AppBar(appBarDiv, {});
                var command = new WinJS.UI.AppBarCommand(null, { id: "commandID", type:"button", label: "Label", section: "secondary" });
                appBar.commands = [command];
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
    app.start();
})();

default.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS references -->
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>

    <!-- App1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body class="win-type-body">
    <p>Content goes here</p>
</body>
</html>

【问题讨论】：

你能解决这个问题吗？
@TheTanic，没有。我不得不放弃程序化的添加和删除。希望他们有一天能修复它。
您是否尝试使用数据属性而不是命令？ [来自 Appbar] 这对我有用
@TheTanic，我对此知之甚少。如果您可以发布有效的答案，我将很乐意接受。
你试过了吗？

标签： winjs windows-10 appbar

【解决方案1】：

作为一种解决方法，您可以在开始时创建所有按钮，然后动态地使它们隐藏或可见。

【讨论】：

【解决方案2】：

通过使用WinJS.UI.AppBar 的data 属性，我意识到了这一点：

首先你需要一个绑定列表的变量：

var commandList;

创建 AppBar：

 function createBar() {
    var appBarDiv = document.createElement("div");
    var appBar = new WinJS.UI.AppBar(appBarDiv, {});
    commandList = new WinJS.Binding.List([]);
    appBar.data = commandList;
    document.body.appendChild(appBarDiv);
}

创建命令的功能：

function createCommand(id, label, tooltip, icon, section) {       
    var btn = document.createElement("button");
    var command = new WinJS.UI.AppBarCommand(btn, {
        id: id,
        label: label,
        tooltip: tooltip,
        icon: icon,
        section: section,
        type: "button"
    });
    return command;
}

向AppBar添加命令的功能：

function addCommand(id, label, tooltip, icon, section) {
    commandList.push(createCommand(id, label, tooltip, icon, section));
}

这对我有用。当然你可以在creatBar()函数中添加命令。

编辑：
这里是一个完整的例子，它创建了 10 个命令并将它们添加到一个已经创建的 AppBar：

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TestApp</title>

    <link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
    <script src="lib/winjs-4.0.1/js/base.js"></script>
    <script src="lib/winjs-4.0.1/js/ui.js"></script>

    <link href="css/default.css" rel="stylesheet" />
    <script src="js/main.js"></script>
</head>
<body class="win-type-body">
</body>
</html>

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var isFirstActivation = true;
    var commandList;

    app.onactivated = function (args) {

        if (isFirstActivation) {

            args.setPromise(WinJS.UI.processAll());
        }

        isFirstActivation = false;
    };

    WinJS.UI.processAll().then(function () {

        createBar();
        for (var i = 0; i < 10; i++) {
            addCommand("test" + i, "test" + i, "test" + i, "street", "primary");
        }
    });

    function createBar() {
        var appBarDiv = document.createElement("div");
        var appBar = new WinJS.UI.AppBar(appBarDiv, {});
        commandList = new WinJS.Binding.List([]);
        appBar.data = commandList;
        document.body.appendChild(appBarDiv);
    }

    function createCommand(id, label, tooltip, icon, section) {
        var btn = document.createElement("button");
        var command = new WinJS.UI.AppBarCommand(btn, {
            id: id,
            label: label,
            tooltip: tooltip,
            icon: icon,
            section: section,
            type: "button"
        });
        return command;
    }

    function addCommand(id, label, tooltip, icon, section) {
        commandList.push(createCommand(id, label, tooltip, icon, section));
    }


    app.start();

})();

【讨论】：