All geek questions in one place

Navigation does not work in WinJS

Hello!

I have an application bar icon and a click event - I added a function that has the following code:

function homePage() { WinJS.Navigation.navigate("/home/homePage.html"); }

Now I have two files - homePage.html, which is inside the / home / and js file for it.

There is a simple button on the html id NextPage.

In the homePage.js file, I have:

 function () { "use strict"; WinJS.UI.Pages.define("/home/homePage.html", { ready: function (element, options) { var button = document.getElementById("NextPage"); button.addEventListener("click", GoToNextPage); } }); function GoToNextPage() { WinJS.Navigation.navigate("/default.html"); } })();

But when I click the application panel icon - nothing happens :(

So what I plan to do is that when someone clicks the application icon on default.html - the user switches to homePage.html (and then when I click the homePage button - it returns) - but not even the start page transfer going on.

It's awkward to ask, but I can't just fold my arms and wait for something magical. I’ve been working on this for an hour - I’m reading videos and samples, but it doesn’t work at all.

Thank help - I can’t understand what is going wrong. Thanks!

+4
source share
1 answer

The WinJS.Navigation namespace provides state and history management, but in reality it does not actually navigate. To move from one page to another, you need to define a handler function for one of the events in the WinJS.Navigation namespace - this allows you to answer the call to the WinJS.Navigation.navigate method in a way that makes sense for your application.

As a demo, here is a homePage.html file that has a NavBar containing a command that will become a trigger for navigation.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>NavProject</title> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/homePage.js"></script> </head> <body> <div id="contentTarget"> <h1>Select a page from the NavBar</h1> </div> <div id="navbar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'top'}"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'NextPage', label:'Next Page', icon:'\u0031', section:'selection'}"> </button> </div> </body> </html>

Along with NavBar, I defined a div element whose id is contentTarget . This is the place in my content where the new file will be uploaded when the user clicks on the NavBar command.

THE CONFIRMATION. All content that you want to replace should go into the contentTarget element. Otherwise, you will get a combination of old and new content.

And here is the JavaScript file that calls it (this is the homePage.js file to which I added the script element for the HTML file above):

 (function () { "use strict"; WinJS.Navigation.addEventListener("navigating", function (e) { var elem = document.getElementById("contentTarget"); WinJS.UI.Animation.exitPage(elem.children).then(function () { WinJS.Utilities.empty(elem); WinJS.UI.Pages.render(e.detail.location, elem) .then(function () { return WinJS.UI.Animation.enterPage(elem.children) }); }); }); var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { args.setPromise(WinJS.UI.processAll()); navbar.addEventListener("click", function (e) { if (e.target.id == "NextPage") { WinJS.Navigation.navigate("/nextPage.html"); } }, true); }; app.start(); })();

Notice how I added a handler function to the WinJS.Navigation.navigating event. This event is triggered by a call to WinJS.Navigation.navigate , and information about the navigation target is contained in the detail.location property of the event object.

In this example, I delete any content in my target element and replace it with the contents of the target file and animate the transition from one to the other.

You need to define only one handler for the event. This means that if I have elements in nextPage.html that lead to navigation, I just need to call WinJS.Navigation.navigate without creating a new event handler, for example:

 <!DOCTYPE html> <html> <head> <title></title> <script> WinJS.UI.Pages.define("/nextPage.html", { ready: function () { back.addEventListener("click", function () { WinJS.Navigation.navigate("/homePage.html"); }); } }); </script> </head> <body> This is next page. <button id="back">Back</button> </body> </html>
+7
source

Source: https://habr.com/ru/post/1434374/

More articles:


All Articles