NativeScript-邏輯控制

大家都知道MVC架構，而NativeScript框架採用的是 MVVM 模式, 即 “model view view model”。

Model: model 定義和表示數據。 將模型與可能使用它的各種視圖分離允許代碼重用；

View: view表示UI，它在NativeScript中用XML編寫。 view通常數據綁定到view-model，因此在JavaScript中對view-model所做的更改會立即觸發對UI組件的可視更改;

View Model: view model 包含應用程序邏輯（通常包括model），並將數據公開到視圖view。 NativeScript提供了一個名爲’Observable’的模塊，它有助於創建可以綁定到視圖的視圖模型(view-model)對象。

code-behind 文件

這個不好翻譯，就這樣寫吧，其實它就是一個頁面視圖後的js文件，要求就是和視圖名稱一樣，如 login.xml對應login.js。

頁面加載事件

現在在頁面加載時執行一個函數：

<Page loaded="loaded">

在login.js裏：

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

結果：

點擊事件

當點擊按鈕時觸發事件：
在button里加一個tap屬性：

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

頁面跳轉

要使用到frame模塊，下節會說。

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

exports.signUp = function(){
    var topmost = frameModule.topmost();
    topmost.navigate("views/register/register");//這裏不需要後綴xml
}

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>

數據傳送

從頁面（view）到邏輯（view-model）

先取到元素，再取值。
設置id

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

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

將數據綁定到組件元素

使用雙大括號
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;
}

當頁面加載時，類似保存密碼功能

完整代碼

目錄結構

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>