×

来扯点ionic3[6] 继续上手表单:魔法般的双向数据绑定

96
忠叔
2017.11.20 17:34* 字数 1243

本系列文集:来扯点ionic3

相关章节:来扯点ionic3[5] 轻松上手表单:这些组件可以玩一年

当我们有了一个表单,要如何处理表单中的数据?

回顾前端技术的发展,最早我们通过 form 的形式,将表单直接 get/post 给服务器,后来有了 ajax 技术,我们提取出表单中的数据,在不刷新页面的情况下就能与服务器进行交互。

假设页面上有一个 id 为 username 的表单,脚本中有一个名为 username 的全局变量,怎么让将二者绑定起来。

document.getElementById('username').value=username;
username=document.getElementById('username').value;

在传统的网页中,我们通过不断触发调用这两条语句中,而让视图中的值和业务脚本中的值保持一致。

在很多时候,我们希望模型和视图是始终同步的:当模型发生变化,就会触发视图发生变化;当视图被更新,也会触发模型的更新。这一些的实现归功于Angular中一个重要的特性:双向绑定。

表单数据双向绑定

此时我们的组件中,有这样的一个成员name:

export class HomePage {

    name:string="Tony Stark";
    ...

  }

我们把模板中已经准备好的 input 组件通过指令和 name 进行双向绑定。

<ion-list>
    <ion-item>
      <ion-label fixed>Name</ion-label>
      <ion-input type="text" [(ngModel)]="name"></ion-input>
    </ion-item>
  </ion-list>

其中 [(ngModel)] 就是将表单和页面组件绑定在一起的桥梁,当一个表单被绑定到某个属性成员上时,它的value就自然等于这个属性的值。


那么,当用户改变了表单里的值,属性成员是否会像我们预期的那样发生改变呢?我将 name 这一属性通过模板语法 {{name}} 输出到了页面上,下面的动图展示了表单更新时属性成员的表现:


动图:Input 双向绑定

一切就这么简单,这就意味着未来我们在开发表单的时候,只要将表单和变量进行绑定,它们之间的同步可以完全交给框架来做,我们最后只需要处理组件中的这些数据,而不需要再编写代码与表单进行交互。

绑定一个对象的成员

对于像这样的一个对象

obj:any={
    id:100
}

可以这样绑定

 <ion-input type="text" [(ngModel)]="obj.id"></ion-input>

Radio 的绑定

对于Radio空间,[(ngModel)]并非直接加在 ion-radio 标签上,而是加在绑定了 ion-radio-group 指令的 ion-list 标签上。

  <ion-list radio-group [(ngModel)]="gender">
    <ion-list-header>请选择性别</ion-list-header>
    <ion-item>
      <ion-label fixed>我是男生</ion-label>
      <ion-radio value="男"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label fixed>我是女生</ion-label>
      <ion-radio value="女"></ion-radio>
    </ion-item>
  </ion-list>

框架会匹配模型的值和 group 中每个 radio 的value,相等的 radio 会默认选中,比如这个例子中 gender 在声明时就被赋值为 "女"。

gender:string="女";
动图:Radio 双向绑定

Toggle 的绑定

Toggle 组件应该绑定一个布尔变量。



Select 的绑定

Select 组件应将数据绑定在 ion-select 标签上,注意当 multiple="true" 是,select的值应该是一个数组。

hobbies:string[]=['足球','电影'];
<ion-list>
    <ion-item>
      <ion-label>兴趣爱好[图片上传中...(7.3.gif-46356f-1511168830451-0)]
</ion-label>
      <ion-select multiple="true" [(ngModel)]="hobbies">
        <ion-option value="足球">足球</ion-option>
        <ion-option value="篮球">篮球</ion-option>
        <ion-option value="阅读">阅读</ion-option>
        <ion-option value="电影">电影</ion-option>
        <ion-option value="旅行">旅行</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>
动图: Select 多选模式下的数据绑定

Range的绑定

Range 应该绑定一个 number 型变量,或者一个可以通过 parseInt 转换成 number 的字符串。

这两种都是可以使用的:

age:number=30;
age:string="30";

这种情况也不会出错:

age:string="30岁";

但是这种就可能引发 NaN 的错误:

age:string="thirty";

如果为 range 添加了 dualKnobs="true" 的属性(双滑块),则需要绑定一个包含 lower 和 upper 两个成员的对象。

age:object={
    lower:25,
    upper:35
}
动图:双滑块 Range 的数据绑定

Datetime 的绑定

Datetime 组件绑定一个字符串。但是这个字符串的格式是什么样的呢?如果这个字符串的 displayFormat 是 "YYYY-MM-DD" ,那么字符串也需要使用一致的格式吗?

我们可以让字符串默认为空置,通过更改表单先输出一个值。


似乎符合预期,这时把 displayFormat 改为中文的形式:


这时我们发现,datetime组件的值并不和我们看到的格式保持一致,那的格式是基于什么样的标准呢?实际上它采用了 ISO 8601 的日期格式标准,它是这样子的:

2017
2017-11
2017-11-20
2017-11-20T17:30
2017-11-20T17:30:55Z
17:30
17:55

也就是说,在单纯只有日期或时间的情况下,和我们熟悉的 YYYY-MM-DD HH:mm:ss 的格式是一致的,但是同时存在日期和时间的情况下,就要注意它的写法了。

所以说,不论 displayFormat 的格式是什么,最后我们拿到都是这种格式的字符串,你可以直接以这样一个格式和服务器进行交互。但是如果你的数据库采用了的这一字段采用了 datetime 格式,则需要进行一个转换。

提供参考的文档

  1. 官方文档:Datetime
  2. Date and Time Formats

下一章:来扯点ionic3[7] LocalStorage的使用—以登录和注销为例

来扯点ionic
Web note ad 1