Nativescript-data-binding

NativeScript-データバインディング

データバインディングは、NativeScriptでサポートされている高度な概念の1つです。 NativeScriptは、Angularデータバインディングの概念に可能な限り厳密に従っています。 データバインディングにより、UIコンポーネントはプログラミングを行わなくても、アプリケーションデータモデルの現在の値を表示/更新できます。

NativeScriptは、2種類のデータバインディングをサポートしています。 彼らは次のとおりです-

一方向のデータバインディング-モデルが変更されるたびにUIを更新します。

双方向データバインディング-UIとモデルを同期します。 モデルが更新されるたびに、UIは自動的に更新されます。また、UIがユーザーからデータを取得する（UIが更新される）たびに、モデルが更新されます。

このセクションの両方の概念を学びましょう。

一方向データバインディング

NativeScriptには、UIコンポーネントで一方向のデータバインディングを有効にする簡単なオプションが用意されています。 一方向のデータバインディングを有効にするには、ターゲットUIのプロパティに角かっこを追加し、必要なモデルのプロパティを割り当てます。

たとえば、ラベルコンポーネントのテキストコンテンツを更新するには、以下のようにUIコードを変更します-

<Label [text]='this.model.prop'/>

ここに、

*this.model.prop* はモデルのプロパティthis.modelを参照します。

一方向のデータバインディングを理解するために、BlankNgAppを変更してみましょう。

ステップ1

次のように新しいモデル、ユーザー（src/model/user.ts）を追加します-

export class User {
   name: string
}

ステップ2

コンポーネント、 src/app/home/home.componentl のUIを開き、コードを以下のように更新します-

<ActionBar>
   <Label text="Home"></Label>
</ActionBar>
<GridLayout columns="*" rows="auto, auto, auto">
   <Button text="Click here to greet" class="-primary" color='gray'
      (tap)='onButtonTap($event)' row='1' column='0'>
   </Button>
   <Label [text]='this.user.name' row='2' column='0'
      height="50px" textAlignment='center' style='font-size: 16px;
      font-weight: bold; margin: 0px 32px 0 25px;'>
   </Label>
</GridLayout>

ここに、

• ラベルのテキストは、ユーザーモデルのプロパティ名に設定されます。
• ボタンタップイベントがonButtonTapメソッドにアタッチされます。

ステップ3

ホームコンポーネント src/app/home/home.component.ts のコードを開き、以下のようにコードを更新します-

import { Component, OnInit } from "@angular/core";
import { User } from "../../model/user"
@Component({
   selector: "Home",
   templateUrl: "./home.componentl"
})
export class HomeComponent implements OnInit {
   public user: User;
   constructor() {
     //Use the component constructor to inject providers.
      this.user = new User();
      this.user.name = "User1";
   }
   ngOnInit(): void {
     //Init your component properties here.
   }
   onButtonTap(args: EventData) {
      this.user.name = 'User2';
   }
}

ここに、

• ユーザーモデルがインポートされます
• ユーザーオブジェクトはコンポーネントのコンストラクタで作成されます
• onButtonTapイベントが実装されています。 onButtonTapの実装により、Userオブジェクトが更新され、プロパティの名前がUser2として設定されます

ステップ4

アプリケーションをコンパイルして実行し、ボタンをクリックしてモデルを変更すると、 _ Label_ テキストが自動的に変更されます。

アプリケーションの初期状態と最終状態は次のとおりです-

初期状態

一方向データバインディングの初期状態を以下に示します-

一方向のデータバインディング

最終状態

一方向のデータバインディングの最終状態を以下に示します-

最終状態

双方向のデータバインディング

NativeScriptは、高度な機能のために双方向のデータバインディングも提供します。 モデルデータをUIにバインドし、UIで更新されたデータをモデルにバインドします。

双方向のデータバインディングを行うには、ngModelプロパティを使用し、以下のように[]と（）で囲みます-

<TextField [(ngModel)] = 'this.user.name'></TextField>

BlankNgAppアプリケーションを変更して、双方向データバインディングをよりよく理解しましょう。

ステップ1

次に示すように、NativeScriptFormsModuleをHomeModule（ src/app/home/home.module.ts ）にインポートします-

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
@NgModule({
   imports: [
      NativeScriptCommonModule,
      HomeRoutingModule,
      NativeScriptFormsModule
   ],
   declarations: [
      HomeComponent
   ],
   schemas: [
      NO_ERRORS_SCHEMA
   ]
})
export class HomeModule { }

ここに、

NativeScriptFormsModuleは、双方向のデータバインディングを可能にします。 そうしないと、双方向データバインディングが期待どおりに機能しません。

ステップ2

以下に示すようにホームコンポーネントのUIを変更します-

<ActionBar> <Label text="Home"></Label></ActionBar>
<GridLayout columns="*" rows="auto, auto">
   <TextField hint="Username" row='0' column='0' color="gray"
      backgroundColor="lightyellow" height="75px" [(ngModel)]='this.user.name'>
   </TextField>
   <Label [text]='this.user.name' row='1' column='0' height="50px"
      textAlignment='center' style='font-size: 16px; font-weight: bold;
      margin: 0px 32px 0 25px;'>
   </Label>
</GridLayout>

ここに、

ラベルコンポーネントのtextプロパティは、一方向のデータバインディングで設定されます。 モデルユーザーが更新されると、そのテキストプロパティが自動的に更新されます。

TextFieldコンポーネントは、ngModelをthis.user.nameとして設定します。 モデルユーザーが更新されると、そのテキストプロパティが自動的に更新されます。 同時に、ユーザーがTextFieldの値を変更すると、モデルも更新されます。 モデルが更新されると、ラベルのテキストプロパティの変更もトリガーされます。 したがって、ユーザーがデータを変更すると、Labelのtextプロパティに表示されます。

ステップ3

アプリケーションを実行し、テキストボックスの値を変更してみます。

アプリケーションの初期状態と最終状態は、以下に指定されているものと同様です-

初期状態

双方向データバインディング–初期状態は以下のとおりです-

初期状態

最終状態

双方向データバインディング–最終的な状態を以下に示します-

双方向の最終状態