NativeScript - Data Binding
A vinculação de dados é um dos conceitos avançados suportados pelo NativeScript. NativeScript segue o conceito de vinculação de dados Angular o mais próximo possível. A vinculação de dados permite que o componente UI mostre / atualize o valor atual do modelo de dados do aplicativo sem nenhum esforço de programação.
NativeScript oferece suporte a dois tipos de vinculação de dados. Eles são os seguintes -
One-Way data binding - Atualize a IU sempre que o modelo for alterado.
Two-Way data binding- Sincronize a IU e o modelo. Sempre que o modelo é atualizado, a IU é atualizada automaticamente e também sempre que a IU obtém dados do usuário (a IU é atualizada), o modelo será atualizado.
Vamos aprender os dois conceitos desta seção.
Vinculação de dados unilateral
NativeScript fornece uma opção simples para habilitar a vinculação de dados unilateral em um componente de IU. Para habilitar a vinculação de dados unilateral, basta adicionar colchetes na propriedade da IU de destino e, em seguida, atribuir a propriedade do modelo necessária.
Por exemplo, para atualizar o conteúdo de texto de um componente Label, basta alterar o código da IU conforme abaixo -
<Label [text]='this.model.prop' />Aqui,
this.model.prop refere-se à propriedade do modelo, this.model.
Vamos mudar nosso BlankNgApp para entender a vinculação de dados unilateral.
Passo 1
Adicione um novo modelo, User (src / model / user.ts) da seguinte forma -
export class User {
name: string
}Passo 2
Abra a IU do nosso componente, src/app/home/home.component.html e atualize o código conforme abaixo -
<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>Aqui,
O texto do rótulo é definido como o nome da propriedade do modelo do usuário.
O evento de toque de botão é anexado ao método onButtonTap.
etapa 3
Código aberto do componente doméstico, src/app/home/home.component.ts e atualize o código conforme abaixo -
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';
}
}Aqui,
modelo de usuário é importado
O objeto do usuário é criado no construtor do componente
O evento onButtonTap é implementado. A implementação de onButtonTap atualiza o objeto Usuário e define o nome da propriedade como Usuário2
Passo 4
Compile e execute o aplicativo e clique no botão para alterar o modelo e ele mudará automaticamente o Label texto.
O estado inicial e final do aplicativo é o seguinte -
Estado inicial
O estado inicial de vinculação de dados unilateral é mostrado abaixo -
Estado Final
O estado final da vinculação de dados unilateral é mostrado abaixo -
Vinculação de dados bidirecional
NativeScript também fornece vinculação de dados bidirecional para funcionalidade avançada. Ele vincula os dados do modelo à IU e também vincula os dados atualizados na IU ao modelo.
Para fazer a vinculação de dados bidirecional, use a propriedade ngModel e coloque-a entre [] e () como abaixo -
<TextField [(ngModel)] = 'this.user.name'></TextField>Vamos mudar o aplicativo BlankNgApp para entender melhor a vinculação de dados bidirecional.
Passo 1
Importe NativeScriptFormsModule para o HomeModule (src/app/home/home.module.ts) conforme especificado abaixo -
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 { }Aqui,
NativeScriptFormsModule permite a vinculação de dados bidirecional. Caso contrário, a vinculação de dados bidirecional não funcionará conforme o esperado.
Passo 2
Altere a IU do componente inicial conforme fornecido abaixo -
<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>Aqui,
A propriedade de texto do componente Label é definida com vinculação de dados unilateral. Se o usuário do modelo for atualizado, sua propriedade de texto será atualizada automaticamente.
O componente TextField define o ngModel como this.user.name. Se o usuário do modelo for atualizado, sua propriedade de texto será atualizada automaticamente. Ao mesmo tempo, se o usuário alterar o valor do TextField, o modelo também será atualizado. Se o modelo for atualizado, ele também acionará as alterações nas propriedades de texto do Label. Portanto, se o usuário alterar os dados, eles serão exibidos na propriedade text do Label.
etapa 3
Execute o aplicativo e tente alterar o valor da caixa de texto.
O estado inicial e final do aplicativo será semelhante ao especificado abaixo -
Estado inicial
Two-way data binding – Initial state is given below −
Final State
Two-way data binding – Final state is shown below −
