Windows 8 Metro Settings Flyouts don't seem to work in Javascript?

问题

I've recently been trying to create a metro app for Windows 8 and tried to use settings flyout.

So I followed msdn quickstart: http://msdn.microsoft.com/en-us/library/windows/apps/hh780611.aspx

However, I can't make it work.

Here's the part where I add the settings flyout:

function setupSettings() {
    app.onsettings = function (e) {
        e.detail.applicationcommands = { 'serv_changer': { title: 'Change Server', href: 'settings.html' } };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
}

The function setupSettings is called only once when I press a button (so I can make sure it only gets executed once)

Here's my issue: after pressing the button, the "Change Server" link does appear. However, when I click on it, nothing happens and the side window just fades out.

Here are the things I tried so I know it's not one of these:

It is not the file missing. I tried to put a different file that didn't exist and an exception was thrown and the program crashed. Here, it does not crash.
The HTML is properly coded, as I tried to replace settings.html by one of Microsoft's example settings file.

I am having troubles figuring out why it does not work.

Could somebody help (I can provide more code if needed) ?

Thank you.

回答1:

In your settings.html page, make sure the data-win-control declaration includes setting the name of the commandId - this seems to be missing from the online example.

Eg.

If your js file declares the command as:

e.detail.applicationcommands = { 'serv_changer': { title: 'Change Server', href: 'settings.html' } };

...then make sure your settings.html file references 'serv_changer':

<div data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'serv_changer', width:'wide'}">

回答2:

on my app, I have slash slash in my href. so something like this href: '/settings.html'

Also on your settings.html page make sure you have this data-win-control="WinJS.UI.SettingsFlyout"

回答3:

Replace your js function

function setupSettings() {
    app.onsettings = function (e) {
        e.detail.applicationcommands = { 'serv_changer': { title: 'Change Server', href: 'settings.html' } };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }
}

with this:

function setupSettings(e) {
        e.detail.applicationcommands =
        {
            "serv_changer":
            {
                title: "Change Server",
                href: "/settings.html"
            }
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    }

and also make sure serv_changer is referenced in your settings.html file:

<div data-win-control="WinJS.UI.SettingsFlyout" data-win-options="{settingsCommandId:'serv_changer'}">

来源：https://stackoverflow.com/questions/12655011/windows-8-metro-settings-flyouts-dont-seem-to-work-in-javascript

标签

javascript

windows-8

microsoft-metro

settings

flyout