locked
Settings charm: reacting to application command activation RRS feed

  • Question

  • Populating the settings charm with references to static pages is easy. But supposing I want to add some code that is called whenever a page referred to in the href of an application command is called, where do I put the code?

    Including a JavaScript in the page only works once, successive navigation to the fragment in question doesn't evoke "fragmentappended" events and looking at the code in question I can't see any reference to any other events that may be fired.

    Monday, March 19, 2012 7:25 PM

Answers

  • Ok, found the answer 30 seconds after posting...

    WinJS.UI.Pages.define "/html/settings/about.html"
      ready: (element, options) ->

    • Proposed as answer by Bryan Thomas Monday, March 19, 2012 9:08 PM
    • Marked as answer by Marcus Ilgner Thursday, March 22, 2012 4:33 PM
    Monday, March 19, 2012 7:30 PM

All replies

  • Ok, found the answer 30 seconds after posting...

    WinJS.UI.Pages.define "/html/settings/about.html"
      ready: (element, options) ->

    • Proposed as answer by Bryan Thomas Monday, March 19, 2012 9:08 PM
    • Marked as answer by Marcus Ilgner Thursday, March 22, 2012 4:33 PM
    Monday, March 19, 2012 7:30 PM
  • Hi Marcus

    I have the same challenge you had, needing an event fired each time a settings pane was displayed. 

    I tried wrapping the JavaScript for the settings pane with WinJS.UI.Pages.define but the ready event isn't being fired.

    I would appreciate any assistance  / sample code you could provide :)

    Thanks 
    Quinten

    Thursday, September 20, 2012 12:11 AM
  • Not sure if this no longer works in RTM but I had no success using WinJS.UI.Pages.define... and I shouldn't have either :)

    The SettingsFlyout has four events that can be tapped into. The following snippet works perfectly, the events are fired as expected. 

    document.body.addEventListener("DOMNodeInserted", onNodeInsertedIntoDocument, true);
    
    function onNodeInsertedIntoDocument() {
        var element = document.getElementById("xxx");
    
        if (element) {
            element.addEventListener("beforeshow", onBeforeShow, false);
            element.addEventListener("beforehide", onBeforeHide, false);
        }
    }
    
    function onBeforeHide(e) {
        console.log("settings flyout hiding");
    }


    • Proposed as answer by Quinten.Miller Thursday, September 20, 2012 12:46 PM
    Thursday, September 20, 2012 12:45 PM