数据绑定
小程序中的数据均来自于对应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>
数据绑定,列表渲染,模板分离都搞定,下一节研究一下模板的作用域。