Basics: Mark Support


With declarative syntax, you can pass event handlers into data-win-options, e.g.

<div data-win-control="WinJS.UI.SplitViewCommand" data-win-options= "{
    label:'Alki Trial',
    icon:'mappin',
    onclick: mySplitView.trailClicked
}"></div>

This allows you to subscribe to events directly in the HTML.

Because the event handler is declared in the HTML, it gets called when WinJS.UI.processAll() parses the declarative markup. As a security feature, WinJS.UI.processAll() will block the event handler, to avoid malicious JavaScript from being run. Therefore, to prevent a security error, you have to mark your event handler as "safe". To do this, you need to wrap the event handler's definition in a function called WinJS.Utilities.markSupportedForProcessing or WinJS.UI.eventHandler.

trailClicked: WinJS.UI.eventHandler(function (ev) {
  var trailId = ev.currentTarget.dataset.trailId;
  updateUI(allTrails[trailId]);
})

Try It Out

Check It Out

Above, we have marked the "trailClicked" event handler as safe. Now we need to do the same for the "homeClicked" event handler.

In the HTML:

  • Customize the home button in the SplitView navigation pane to respond to the event onclick by calling the function mySplitView.homeClicked
  • <div data-win-control="WinJS.UI.SplitViewCommand"
    data-win-options="{
    label: 'Home',
    icon: 'home',
    onclick: mySplitView.homeClicked
    }"> </div>

In the JS:

  • Insert a function into the JavaScript implementation below to make the event handler safe to be used by processAll().
  • homeClicked: WinJS.UI.eventHandler(function (ev) {
        document.getElementById("app").classList.add("show-home");
        document.getElementById("app").classList.remove("show-trail");
    })

Check the output, to see if the home button shows.

Clicking "Yes" will replace the code in the editor with the correct code.
Are you sure you want to do this?