Login Form Troubles


#1

New to NativeScript, working through some examples. I have Sidekick running and an Android tablet connected.

I used Sidekick to create a login page. The code it creates seems to have a few problems and I haven’t been able to get through all of it.

  1. The code in login-page.js was broken, in that the sign in button tap didn’t work. I figured that out; seems the buitton doesn’t actually have a bindingcontext even though the code referred to it.

  2. The model doesn’t seem to be wired up properly still. I can’t figure this one out. Two symptoms, first, a hard coded value for user should show up in the text box and it doesn’t, and second, referencing topmost frame to navigate causes exception “Cannot read property ‘navigate’ of undefined”

Here is the model:

const observableModule = require("data/observable");
var frameModule = require("tns-core-modules/ui/frame");

function LoginViewModel() {
    const viewModel = observableModule.fromObject({
        email: "me@myself.com",
        password: "",

        signIn: function () {
            const email = this.email;
            const password = this.password;

            /* ***********************************************************
            * Call your custom signin logic using the email and password data.
            *************************************************************/
            var topmost = frameModule.topmost();
            topmost.navigate("app-root");

        }
    });

    return viewModel;
}

module.exports = LoginViewModel;

Only thing I added was value for email (doesn’t flow to text box) and navigate (apparently topmost has no value)

I really thought a page created by sidekick would ‘just work’.

Thanks in advance.


#2

“Cannot read property ‘navigate’ of undefined” happens when you don’t have any frame in your app. Frame is the component which manages your navigations, if you don’t have frames you can’t navigate at all.

I’m not a SideKick user, but I assume you asked SideKick to create a login page and it did a working page, but won’t know whether or not you have a frame in your app, it won’t obviously analyze all your code before creating a snippet.


#3

I guess I just don’t get frames. I thought you could use application.run with any page, (instead of the old start method), but does the page you run now have to have a Frame element in it?

Yes I used Sidekick to create the login page, but the page it creates doesn’t work. Even if you leave out the navigation stuff I added, the button tap event didn’t work as written, and since the email value doesn’t appear in the text box, I suspect the binding isn’t even happening correctly. I could use some help with that as well.

Thanks


#4

application.start() is the method that creates a frame implicitly.

I’m sorry, haven’t used SideKick much. If you face issues, feel free to report them to the sidekick feedback git repo.


#5

But the docs are saying not to use start anymore but use run instead. So with run, I have to have a Frame explicitly in the page.xml?

Aside from Sidekick itself, just looking at binding, if I have the code above, then set binding context:

const LoginViewModel = require("./Login-view-model");

var bc = new LoginViewModel();

function onNavigatingTo(args) {
    const page = args.object;
    page.bindingContext = bc;  
}

exports.onNavigatingTo = onNavigatingTo;

I would expect the bound Textfield to show the value "me@myself.com" but it doesn’t?


#6

Yes, if you are using run, you will have to define the frame yourself. There must be at least one frame to do any sort of navigation.


#7

And yes, it should show the value in TextField if you have bound it correctly in XML.


#8

Okay I fixed part of this. I added a file login-root.xml with this:

<Frame defaultPage="Login/Login-page"/>

and now the binding works as it should.

But still get the same error when trying to navigate. Why does the topmost variable not have a frame now?


#9

I changed the navigation statement to this:

            frameModule.topmost().navigate("./app-root");

apparently there was something wrong with the variables in the code I was using. This works for interior pages, but trying to go to app-root I get the exception “System.err: TypeError: backstackEntry.resolvedPage.onNavigatingTo is not a function”

I tried both ./app-root and app-root. There is an app-root.xml file there, and I even added an app-root.js just for completeness.