问题描述
我使用以下代码创建了应用栏：
$
I have created the app bar using following code:
appBar1：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<div id="appBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'New Item', icon: 'add'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{section: 'global', label: 'Stores',
icon: 'shop'}">
</button>
</div>
</body>
</html>在其他页面中：
<!-- import HTML fragments -->
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri: '/html/appBar1.html'}"></div>
<!-- end of HTML fragments -->
<!-- template>现在问题是，
1。你如何在Javascript代码中获得appBar参考？我尝试了document.getElementById（" appBar"）。winControl，但它不起作用。
1. How do you get the appBar reference in Javascript code? I tried document.getElementById("appBar").winControl, but it does not work.
2。如何在appbar命令上安装事件处理程序？我无法在我的javascript代码中获取按钮引用。
2. How do you install the event handlers on appbar commands here? I can not get the button reference in my javascript code.
推荐答案
var appBar = document.querySelector（"＃appbar"）。winControl;
appBar.getCommandById（" shop"）。onclick = function（）{
// do something};
var appBar = document.querySelector("#appbar").winControl;appBar.getCommandById("shop").onclick = function() {//do something};
你需要在data-win-options中给每个命令一个id，就是你引用它的方式。
You need to give each command an id in the data-win-options, that is how you reference it.
data-win-options =" {section：'global' ，label：'Stores'，图标：'shop'，id：'shop'}"
data-win-options="{section: 'global', label: 'Stores', icon: 'shop', id: 'shop'}"
这篇关于你如何在Javascript代码中获得appBar参考的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！