NativeScript-Logic Control

Everyone knows the MVC architecture, and the NativeScript framework uses the MVVM model, that is, "model view view model".

Model: model defines and represents data. Separating the model from the various views that might use it allows code reuse;

View: view represents the UI, which is written in XML in NativeScript. Views are usually data-bound to view-models, so changes made to view-models in JavaScript immediately trigger visual changes to UI components;

View Model: The view model contains the application logic (usually including the model) and exposes the data to the view view. NativeScript provides a module called 'Observable', which helps to create view-model objects that can be bound to views.

code-behind file

This is not easy to translate, just write it like this. In fact, it is a js file after a page view. The requirement is the same as the view name, such as login.xml corresponding to login.js.

Page load event

Now execute a function when the page loads:

<Page loaded="loaded">

In login.js:

exports.loaded = function(){
    console.log("loaded");
}

result:

Click event

The event is triggered when the button is clicked:
add a tap attribute to the button:

 <Button text="Sign in" tap="signIn"/>
 <Button text="Sign up for Groceries" class="link" tap = "signUp"/>

exports.signIn = function(){
    alert("sign in...");
}
exports.signUp = function(){
    alert("sign up...");
}

Page jump

To use the frame module, the next section will say.

var frameModule = require("ui/frame");

exports.signUp = function(){
    var topmost = frameModule.topmost();
    topmost.navigate("views/register/register");//这里不需要后缀xml
}

register.xml page:

<Page loaded="loaded">
    <StackLayout>
        <Image src="res://logo" stretch="none" horizontalAlignment="center"/>

        <TextField text="{{ email }}" id="email" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
        <TextField text="{{ password }}" secure="true" hint="Password" />

        <Button text="Sign Up" tap="register" />
    </StackLayout>
</Page>

data transmission

From page (view) to logic (view-model)

Get the element first, then the value.
Set id

<TextField id="email" hint="Email Address"  />

In login.js:

var page;
var email;
exports.loaded = function(args){
    page = args.object;
}

exports.signIn = function(){
    //alert("sign in...");
    email = page.getViewById("email");
    console.log(email.text);
}

Bind data to component elements

Use double braces
login.xml

<TextField id="email" text="{{email}}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
        <TextField hint="Password" text="{{ password}}" secure="true" />

login.js

var Observable = require("data/observable").Observable;

var user = new Observable({
    email: "[email protected]",
    password: "password"
});

var page;
var email;
exports.loaded = function(args){
    page = args.object;
    page.bindingContext = user;
}

When the page loads, similar to save password function

Complete code

Directory Structure

login.xml

<Page loaded="loaded">
    <StackLayout>
        <Label text="hello jimo" />
        <Image src="res://logo" stretch="none" horizontalAlignment="center" />
        <TextField id="email" text="{{email}}" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
        <TextField hint="Password" text="{{ password}}" secure="true" />

        <Button text="Sign in" tap="signIn"/>
        <Button text="Sign up for Groceries" class="link" tap = "signUp"/>
    </StackLayout>
</Page>

login.js

var frameModule = require("ui/frame");
var Observable = require("data/observable").Observable;

var user = new Observable({
    email: "[email protected]",
    password: "password"
});

var page;
var email;
exports.loaded = function(args){
    page = args.object;
    page.bindingContext = user;
}

exports.signIn = function(){
    //alert("sign in...");
    email = page.getViewById("email");
    console.log(email.text);
}
exports.signUp = function(){
    var topmost = frameModule.topmost();
    topmost.navigate("views/register/register");
}

register.xml

<Page loaded="loaded">
    <StackLayout>
        <Image src="res://logo" stretch="none" horizontalAlignment="center"/>

        <TextField text="{{ email }}" id="email" hint="Email Address" keyboardType="email" autocorrect="false" autocapitalizationType="none" />
        <TextField text="{{ password }}" secure="true" hint="Password" />

        <Button text="Sign Up" tap="register" />
    </StackLayout>
</Page>