NativeScript-Logic Control

Todos conocen la arquitectura MVC, y el marco NativeScript utiliza el modelo MVVM, es decir, "modelo vista vista modelo".

Modelo: el modelo define y representa datos. Separar el modelo de las diversas vistas que podrían usarlo permite la reutilización del código;

Vista: la vista representa la IU, que está escrita en XML en NativeScript. Las vistas suelen estar vinculadas a los modelos de vista, por lo que los cambios realizados en los modelos de vista en JavaScript desencadenan inmediatamente cambios visuales en los componentes de la interfaz de usuario;

Modelo de vista: El modelo de vista contiene la lógica de la aplicación (generalmente incluye el modelo) y expone los datos a la vista de vista. NativeScript proporciona un módulo llamado 'Observable', que ayuda a crear objetos de modelo de vista que pueden vincularse a vistas.

archivo de código subyacente

Esto no es fácil de traducir, solo escríbalo así. De hecho, es un archivo js después de una vista de página. El requisito es el mismo que el nombre de la vista, como login.xml correspondiente a login.js.

Evento de carga de página

Ahora ejecute una función cuando se carga la página:

<Page loaded="loaded">

En login.js:

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

El resultado:

Haga clic en evento

El evento se activa cuando se hace clic en el botón:
agregue un atributo de toque al botón:

 <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...");
}

Salto de página

Para usar el módulo de marco, la siguiente sección dirá.

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

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

página 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>

Transferencia de datos

De la página (vista) a la lógica (vista-modelo)

Obtenga el elemento primero, luego el valor.
Establecer id

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

En 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);
}

Vincula datos a elementos componentes

Utilice llaves dobles
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;
}

Cuando se carga la página, similar a guardar la función de contraseña

Código completo

Estructura del directorio

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>