NativeScript navigation issues

[TJ]

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

[Vlad]

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

 

 

[TJ]

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!

[TJ]

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

[Vlad]

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

 

 

[TJ]

Awesome. Thanks Vlad!