This is a migrated thread and some comments may be shown as answers.

NativeScript navigation issues

5 Answers 65 Views
NativeScript Insiders
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
TJ
Top achievements
Rank 1
TJ asked on 05 Jan 2015, 03:49 AM
I've been playing with NativeScript navigation and have ran into a few issues. First I noticed that navigating from a view that has an .xml file to one that doesn't fails, at least in my case.

Second, when I call `navigate()` I seem to navigate multiple times, and eventually my app crashes. I can play with this a bit more to try to get some details tomorrow, but for now I'm not sure what's going on. You can clone this repo to try it out: https://github.com/tjvantoll/grocery-list—just click the button on the starting view, which triggers this call to `navigate()` (https://github.com/tjvantoll/grocery-list/blob/8ea60f3741dcc7d3d26aaa973e27c7b06feeaf0b/app/app/views/login.js#L10).

Thanks,
TJ

5 Answers, 1 is accepted

Sort by
0
Accepted
Vlad
Telerik team
answered on 05 Jan 2015, 01:21 PM
Hi TJ,

I've just tested your app and I've found that you are right!

It seems that loaded event of the page is raised twice in iOS and in your case you will have multiple click event handlers for the button. We are looking to resolve this issue quickly and in the meantime you can attach the click event for the button in XML instead to avoid the problem. Here is an example:

XML
...
<Button id="signUp" text="Sign Up" width="100" click="myClick" />
...

JavaScript
var frameModule = require( "ui/frame" );
 
exports.myClick = function( args ) {
   var topmost = frameModule.topmost();
   topmost.navigate( "app/tj/views/list" );
};

For modules without XML you need to have createPage function in your exports. For example:

JavaScript
var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var PageModule = require("ui/page");
var LabelModule = require("ui/label");
 
var TestPageModule = (function (_super) {
    __extends(TestPageModule, _super);
    function TestPageModule() {
        _super.call(this);
 
        var label = new LabelModule.Label();
        label.text = "Label created within a page module.";
 
        this.content = label;
    }
    return TestPageModule;
})(PageModule.Page);
exports.TestPageModule = TestPageModule;
 
function createPage() {
    return new TestPageModule();
}
exports.createPage = createPage;


Regards,
Vlad
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
TJ
Top achievements
Rank 1
answered on 05 Jan 2015, 03:28 PM
Hey Vlad,

Ok that makes sense. Using the XML to attach the click handler is actually cleaner (and I didn't know it was possible), so I'll go with that.

Thanks!
0
TJ
Top achievements
Rank 1
answered on 05 Jan 2015, 07:53 PM
Hey all,

I ran into one other issue. The docs show how to pass data to the page you're navigating to (https://github.com/NativeScript/docs/blob/master/navigation.md#navigating-between-pages), but not how the new page receives that data. Any ideas?

TJ
0
Vlad
Telerik team
answered on 06 Jan 2015, 08:01 AM
Hi TJ,

Thank you once again! We will fix this immediately and in the meantime please check the details page in cuteness.io app source code for more info. For example:

XML
<Page navigatedTo="pageNavigatedTo">
  ...
</Page>


JavaScript
function pageNavigatedTo(args) {
    var page = args.object;
    page.bindingContext = page.navigationContext;
}
exports.pageNavigatedTo = pageNavigatedTo;

The Page navigationContext property is the data you've set in navigate() method:

JavaScript
...
function listViewItemTap(args) {
    frames.topmost().navigate({
        moduleName: "app/details-page",
        context: appViewModel.redditItems.getItem(args.index)
    });
}
exports.listViewItemTap = listViewItemTap;
...


Regards,
Vlad
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
TJ
Top achievements
Rank 1
answered on 06 Jan 2015, 03:15 PM
Awesome. Thanks Vlad!
Tags
NativeScript Insiders
Asked by
TJ
Top achievements
Rank 1
Answers by
Vlad
Telerik team
TJ
Top achievements
Rank 1
Share this question
or