winjs appbar.wincontrol is null

问题

I am creating a Windows 8 HTML5 app, and implementing an app bar. When I access the appbar.winControl it is always null. So if for example I write appbar.winControl.show() I get an exception claiming that winControl is null.

What I did was create a fixed layout app. Without doing anything else, I added the following markup in the document body:

<body>
<div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar">
    <button id="btnBoardSizeUp" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Larger', icon:'zoomout', section:'global', tooltip:'Increase the board size'}" />
    <button id="btnBoardSizeDown" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Smaller', icon:'zoomin', section:'global', tooltip:'Decrease the board size'}" />
    <button id="btnAbortGame" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Abort', icon:'cancel', section:'selection', tooltip:'Abort the current game'}" />
</div>

<script type="text/javascript">
    var appbar = document.getElementById("appbar");
    var winControl = appbar.winControl;
    winControl.show();
</script>

The line winControl.show() produces the following error:

0x800a138f - JavaScript runtime error: Unable to get property 'show' of undefined or null reference

As far as I can see I have implemented the appbar correctly on the page, so it should work. Any idea what is going wrong?

回答1:

Page Controls are not initialized yet and script is executing before that.

There is two place this code can be placed. either in

// if the app bar is part of default.html, appbar show can be put in default.js
// default.js already have a call to WinJS.UI.processAll under activated event handler
WinJS.UI.processAll().then(function ()
{
    appbar.winControl.show();
});

// if the appbar is part of mypage.html, need to have code like this in mypage.js
WinJS.UI.Pages.define('/pages/mypage/mypage.html',
    {
         ready: function onready(element, options)
         {
             appbar.winControl.show();
         }
    }

回答2:

Whenever you use a winjs control (div with data-win-control attribute) to specify the control you want. You must also call the WinJS.UI.processAll function in your JavaScript code. WinJS.UI.processAll parses your markup and instantiates any Windows Library for JavaScript controls it finds.

If you aren't using the Blank Application template or if you're
adding the control to a page that you created yourself, you might
need to add a call to WinJS.UI.processAll.
If you added the control to your app's home page (which is usually the default.html file), add a call to WinJS.UI.processAll in your onactivated event handler, as shown in the previous example
If you added the control to a Page control, you don't need to add a call to WinJS.UI.processAll because the Page control does that for you automatically.
If you added the control to another page that is not your app's home page, handle the DOMContentLoaded event and use the handler to call WinJS.UI.processAll.

function initialize() {