NativeScript navigation issues

6 posts, 1 answers
  1. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 04 Jan 2015 Link to this post

    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
  2. Answer
    Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 05 Jan 2015 Link to this post

    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.

     
  3. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 05 Jan 2015 in reply to Vlad Link to this post

    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!
  4. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 05 Jan 2015 Link to this post

    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
  5. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 06 Jan 2015 Link to this post

    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.

     
  6. TJ
    TJ avatar
    58 posts
    Member since:
    Aug 2013

    Posted 06 Jan 2015 in reply to Vlad Link to this post

    Awesome. Thanks Vlad!
Back to Top