آموزش اتصال داده در NativeScript

آموزش اتصال داده  در NativeScript

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش اتصال داده در NativeScript خواهیم پرداخت.

اتصال داده یکی از مفاهیم پیشرفته است که توسط NativeScript پشتیبانی می شود. NativeScript تا آنجا که ممکن است از مفهوم اتصال داده های زاویه ای پیروی می کند. اتصال داده مولفه UI را قادر می سازد تا مقدار فعلی مدل داده برنامه را بدون هیچ گونه تلاش برنامه نویسی نشان دهد / به روز کند.

NativeScript از دو نوع اتصال داده پشتیبانی می کند. آنها به شرح زیر هستند –

1. اتصال داده های یک طرفه – هر زمان مدل تغییر کرد ، رابط کاربر را به روز کنید.
2. اتصال داده های دو طرفه – UI و مدل را همگام سازی کنید. هر زمان که مدل به روز شود ، رابط کاربر به طور خودکار و همچنین هر زمان که رابط کاربر از کاربر اطلاعات دریافت می کند (UI به روز می شود) ، مدل به روز می شود.

بگذارید هر دو مفهوم موجود در این بخش را بیاموزیم.

اتصال داده یک طرفه

NativeScript یک گزینه ساده برای فعال کردن اتصال داده های یک طرفه در یک جز UI فراهم می کند. برای فعال کردن اتصال داده های یک طرفه ، کافی است براکت مربع را به ویژگی UI هدف اضافه کنید و سپس ویژگی خاص مدل را به آن اختصاص دهید.

به عنوان مثال، برای به روزرسانی محتوای متن یک جز Lab Label ، فقط کد UI را مانند زیر تغییر دهید –

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

this.model.prop به خاصیت مدل ، this.model اشاره دارد.

بگذارید BlankNgApp خود را تغییر دهیم تا اطلاعات اتصال یک طرفه را درک کنیم.

مرحله ۱

export class User { 
   name: string 
}

مرحله ۲

UI مولفه، src / app / home / home.component.html را باز کنید و کد را به صورت زیر به روز کنید –

<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>

متن Label روی نام ویژگی مدل کاربر تنظیم شده است.

رویداد Tap دکمه ای به روش onButtonTap پیوست شده است.

مرحله ۳

کد جز خانه، src / app / home / home.component.ts را باز کنید و کد را به صورت زیر به روز کنید –

import { Component, OnInit } from "@angular/core"; 
import { User } from "../../model/user" 
@Component({
   selector: "Home", 
   templateUrl: "./home.component.html" 
}) 
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'; 
   } 
}

• مدل کاربر وارد می شود
• شی User کاربر در سازنده کامپوننت ایجاد می شود
• رویداد onButtonTap اجرا شده است. اجرای onButtonTap کاربر را به روز می کند و نام ویژگی را User2 قرار می دهد

مرحله ۴

برنامه را کامپایل و اجرا کنید و برای تغییر مدل روی دکمه کلیک کنید و به طور خودکار متن Label را تغییر می دهد.

حالت اولیه و نهایی برنامه به شرح زیر است –

حالت اولیه

حالت اولیه اتصال داده یک طرفه در زیر نشان داده شده است –

حالت نهایی

وضعیت نهایی اتصال داده یک طرفه در زیر نشان داده شده است –

اتصال داده دو طرفه

NativeScript همچنین اتصال داده های دو طرفه را برای قابلیت های پیشرفته فراهم می کند. داده های مدل را به UI متصل می کند و همچنین داده های به روز شده در UI را به مدل متصل می کند.

برای انجام اتصال دو طرفه داده ، از ویژگی ngModel استفاده کنید و سپس آن را با [] و () مانند زیر محاصره کنید –

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

بگذارید برای درک بهتر اتصال دو طرفه داده ها ، برنامه BlankNgApp را تغییر دهیم.

مرحله ۱

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 اتصال داده های دو طرفه را امکان پذیر می کند. در غیر این صورت ، اتصال داده های دو طرفه مطابق انتظار عمل نخواهد کرد.

مرحله ۲

همانطور که در زیر آورده شده ، رابط کاربری مولفه خانه را تغییر دهید –

<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>

ویژگی متن جز لیبل با اتصال داده های یک طرفه تنظیم می شود. اگر کاربر مدل به روز شود، ویژگی متن آن به طور خودکار به روز می شود.

مولفه TextField ngModel را به عنوان this.user.name تنظیم می كند. اگر کاربر مدل به روز شود ، ویژگی متن آن به طور خودکار به روز می شود. در همان زمان ، اگر کاربر مقدار TextField را تغییر دهد ، مدل نیز به روز می شود. اگر مدل به روز شود ، باعث تغییر ویژگی متن Label نیز می شود. بنابراین ، اگر کاربر داده را تغییر دهد ، آن را در ویژگی متن Label نشان می دهد.

مرحله ۳

برنامه را اجرا کرده و سعی کنید مقدار جعبه متن را تغییر دهید.

حالت اولیه و نهایی برنامه مشابه آنچه در زیر مشخص شده است خواهد بود –

حالت اولیه

اتصال داده های دو طرفه – حالت اولیه در زیر آورده شده است –

حالت نهایی

اتصال داده های دو طرفه – حالت نهایی در زیر نشان داده شده است –

منبع.

لیست جلسات قبل آموزش NativeScript

1. آموزش NativeScript
2. معرفی NativeScript
3. آموزش نصب NativeScript
4. آموزش معماری NativeScript
5. آموزش برنامه Angular در NativeScript
6. آموزش تمپلیت ها در NativeScript
7. آموزش ویجت ها در NativeScript
8. آموزش ظروف طرح بندی در NativeScript
9. آموزش پیمایش در NativeScript
10. آموزش مدیریت رویدادها در NativeScript