5.4.1 页面的数据处理

页面的数据处理分两个方面来阐述，首先是初始化数据，其次是对数据进行操作。

1.数据的初始化

初始化数据将作为页面的第一次渲染。data 将会以 JSON 的形式由逻辑层传至视图层（也就是从.js文件传入到.wxml中，视图层可以通过WXML对数据进行绑定），所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。 示例代码：

js中：

Page({
  data: {
    text: 'init data',    //初始化一个字符串
    array: [{msg: '1'}, {msg: '2'}]     //初始化一个数组
  }
})

wxml中：

<view>{{text}}</view>    //绑定并显示字符串
<view>{{array[0].msg}}</view>  //绑定并显示数组元素

2.数据的设置及展现

在页面 Page() 中，我们不仅可以初始化数据，还可以通过 setData 函数把数据从逻辑层发送到视图层。同时改变对应的 this.data 的值。

注意：

• 直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
• 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

setData() 函数接受一个对象，以 key，value 的形式表示将 this.data 中的 key 对应的值改变成 value。 其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。

示例代码：

js中：

Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

wxml中：

<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>