Windows Phone 8.1 WinJS Appbar disabled property not working

Question

I'm trying to hide (disable) the appBar so it doesn't show on up a page in my app. However the disabled property doesn't seem to be working, or my syntax is off. I've tried using it like:

<script>
    var disabled = appBar.disabled;
    appBar.disabled = disabled;
</script>

and

<script>
    var disabled = appBar.disabled;
    appBar.disabled = true;
</script>

but the appBar is still visible. On both instances I've placed the script just below the HTML:

<!-- BEGINTEMPLATE: Template code for an app bar -->
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="{closedDisplayMode:'minimal', disabled: false}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAbout', label:'about...', section:'selection'}"></button>
</div>
<!-- ENDTEMPLATE -->
<div id="statusMessage"></div>

<script>
    var disabled = appBar.disabled;
    appBar.disabled = true;
</script>

What am I doing wrong?

Answer 1

Do you init appBar variable properly? It's not defined in your code snippet. Try this way, at least it works in my app.

<script>
(function(){
    var appBar = document.getElementById("appBar");
    if(appBar.winControl) {
        appBar.winControl.disabled = true;
    }
}());
</script>

Also don't forget that WinJS.UI.processAll runs asynchronously, so your script can't just be placed after HTML markup, it will work only when the AppBar has been already created.