小程序（5 home页面完善数据绑定、列表渲染、模板分离）

数据绑定

小程序中的数据均来自于对应Page对的data。绑定会用Mustache 语法（双大括号）将变量包起来，可以用于：

内容

<view>{{message}}</view>

page({
    data:{
        message:'hello world'
        }
    })

组件属性 （需要在双引号之内使用）

<view id="item-{{id}}"></view>

page({
    data:{
        id:0
    }
})

另外在 Mustache 语法中还可以进行运算 逻辑判断 等，需要重点说一下 Mustache 语法中的 对象。

<template is='objectCombine' data="{{for:a,bar:b}}"> </template>

page({
    data:{
        a:1,
        b:2
    }
})

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

另外一种比较常用的方法时用运算符 ... 来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }

最终组合成的对象是 {a:1,b:2,c:3,d:4,f:5}

上述方式可以随意组合，但是如果有存在变量名相同的情况，后边的会覆盖前面的。

用上一节 swiper 组件为例：

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

在代码中我们用到了变量 indicatorDots autoplay interval duration imgUrls ,所以我们也需要在 home.js 文件中添加对应的 data 数据。

data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  }

在 swiper 组件中又出现了一种数据绑定的写法 wx:for="{{imgUrls}}" ,这个是小程序的列表渲染。

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标的变量名为 index,数组当前项的变量名为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

page({
    data:{
        array:[{
            message:'foo'
        },{
            message:'bar'
        }]
    }
})

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以使用数组当前下标的变量名；

<view wx:for="{{array}}" wx:for-item="idex" wx:for-index="itemname">
    {{idex}}:{{itemname.message}}
</view>

现在 swiper 组建中的数据都进行了数据绑定，但是在上一节产品item中的数据我们都是写死的文本，现在我们将产品item组件做一下修改，改为数据绑定形式。

home.js

//在data中添加 goods数据
goods:[
    {
        "imagePath":"http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg",
        "good-name":"是滴是滴所多所多所多所多所多所多所多所",
        price:34,
        "original-price":2222,
        "had-sale":34
    },
    {
        "imagePath":"http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg",
        "good-name":"是滴是滴所多所多所多所多所多所多所多所",
        price:34,
        "original-price":2222,
        "had-sale":34
    }
]

home.wxml

//修改goodsItem组件
<view class='goods' wx:for="{{goods}}">
   <view class="goods-item">
        <image src="{{item.imagePath}}" />
        <view class="goods-desc">
            <view class="goods-name">{{item.good_name}}</view>
            <view>
                <text class="momey-tag">￥</text>
                <text class="price">{{item.price}}</text>
                <text style="text-decoration: line-through" class="original-price">￥{{item.original_price}}</text>
            </view>
            <view class="had-sale">
                已售
                <text>{{item.had_sale}}</text>
            </view>
            <view>
                <span class="to-purchase">立即抢购</span>
            </view>
        </view>
  </view> 
</view>

效果：
这里写图片描述

现在 home 页面中的数据绑定和列表渲染都已经成功了，但是依旧还有很多问题没有解决，比如点击每一个产品item跳转到对应的产品详情页面，这样当产品item较多，操作较为复杂的时候全部在 home.wxml 不便代码修改，我们最好将产品item组件单独分离出来。

模板分离

小程序提供模板（template）,可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字，然后在 <tempalte/> 内定义代码片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板

使用 is 属性，声明需要使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }

模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。

我们将goodItem从 home.wxml 中分离出来，写成单独的 goodItem 模块。

新建 pages/home/good 目录。

home/good/good.wxml

<template name="goodItem">
    <view class="goods-item">
        <image src="{{item.imagePath}}" />
        <view class="goods-desc">
            <view class="goods-name">{{good_name}}</view>
            <view>
                <text class="momey-tag">￥</text>
                <text class="price">{{price}}</text>
                <text style="text-decoration: line-through" class="original-price">￥{{original_price}}</text>
            </view>
            <view class="had-sale">
                已售
                <text>{{had_sale}}</text>
            </view>
            <view>
                <span class="to-purchase">立即抢购</span>
            </view>
        </view>
  </view> 
<template />

修改 home.wxml文件

//在最上面引入模板文件    
<import src="good/good.wxml"></import>

<view class='goods' wx:for="{{goods}}">
  <template is="goodItem" data="{{...item}}"></template> 
</view>

数据绑定，列表渲染，模板分离都搞定，下一节研究一下模板的作用域。