微信小程序入门七：数据绑定

一、简介

在微信小程序中提供了类似于模板引擎的方法来实现数据的绑定。从而动态控制页面显示内容。
注意：这是单向数据绑定，即只能在js里来控制wxml里的数据，而不能通过视图层的数据变化来直接改变model层数据的变化。

1.1 数据绑定

在小程序中，通过{{}}将js中初始的数据绑定到视图中

1）、简单绑定

    <!-- wxml -->
    <view>{{msg}}</view>
    <!-- js -->
    Page({
        data:{
            msg:'hello world'
        }
        })

如上：在js中通过data属性进行数据的初始化，在wxml中通过{{}}表达式将数据绑定到视图

注意：
1、数据值作为组件（标签）的属性进行绑定时，要写在“双引号”之内
2、针对布尔值true,false要用表达式来写，例如checkbox的checked属性，不能直接写checked=”false”,这样计算出来的结果是字符串，转换来布尔值还是true，因此使用checked={{false}}来设置checkbox的是否选中属性

2)、{{}}内的运算

1）、在{{}}内可以进行值的运算，包括算数运算，三元运算，字符串的运算，以即逻辑判断
2）、{{}}内可以对数据进行组合，例如下面代码：
A、数组与属性的组合

    <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
    <!-- js部分 -->
    Page({
      data: {
        zero: 0
      }
    })

B、对象组合

    <template is="objectCombine" data="{{for: a, bar: b}}"></template>
    <!-- js -->
    Page({
      data: {
        a: 1,
        b: 2
      }
    })

最终组合成的对象是 {for: 1, bar: 2}

2、条件渲染 wx:if

通过wf:if判断一个表达式的方式来控制标签的显示与否
wf:if添加在标签上，传入一个判断表达式，实现条件判断

例：如下简单示例,前两条都为false所以走else这条，最终页面只会显示3

    <view wx:if="{{2> 5}}"> 1 </view>
    <view wx:elif="{{1 > 2}}"> 2 </view>
    <view wx:else> 3 </view>

进阶：
因为 wx:if 是标签内的。但项目中经常需要判断的不是一个标签的显示与否，而是一块儿区域，这里可以通过标签将多个组件包装起来，在block标签中使用wx:if来控制元素的显示
注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
例：

    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>

3、列表渲染 wx:for

在组件上用wx:for使用数组中各项的数据重复渲染该组件。

1)、默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
2)、wx:for-item用于指定数组当前元素的变量名，wx:for-index用于指定数组当前下标的变量名：
3)、 wx:for可以进行嵌套使用
例：九九乘法表

    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
      </view>
    </view>

进阶：
使用标签包装多节点的结构

注意：在使用wx:for遍历数组时，会报一个需指定wx:key的警告，此警告的作用指当用户所遍历的数据是会动态改变的或者有新项目添加到列表中时，需要有一个key来与之前的数据做参考对比。

    <block wx:for="{{arrs}}" wx:key="this">
      <view> {{item}} </view>
    </block>
    <!-- js部分 -->
    Page({
      data:{
        arrs:[1,2,3,4,5,6]
      }
    })

如上是一个简单的数据遍历示例，wx:key的值可以有两种形式：
1）、就如上面一样用this，指带当前for循环中的item本身（即用item本身作为遍历的标识）
2）、字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

4、模板template

1)、定义模板

     <template name="tpl">
        <view wx:for="{{user}}" wx:key="this">
             姓名：{{item.name}} 年龄：{{item.age}}
        </view>
    </template>
    <!-- 数据 -->
    Page({
  data:{
    user:[
      {
        name:"小强",
        age:18
      },
      {
        name:"小明",
        age:18
      },
      {
        name:"小红",
        age:18
      },
      {
        name:"小花",
        age:18
      },
    ]
  }
})

2)、使用模板

  <template is="tpl" data="{{user}}" ></template>

补充：运算符{{…object}}可以将object展开传入到视图中进行渲染。