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

数据绑定

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

内容

{{message}}

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

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

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

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

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

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

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

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

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

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

用上一节 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

  {{index}}: {{item.message}}


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

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

    {{idex}}:{{itemname.message}}

现在 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组件

   
        
        
            {{item.good_name}}
            
                ￥
                {{item.price}}
                ￥{{item.original_price}}
            
            
                已售
                {{item.had_sale}}
            
            
                立即抢购
            
        
   

效果：

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

模板分离

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

定义模板

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

使用模板

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