【微信小程序】data="{{...item}}"中...的作用

//js代碼
<!--
item: {
  index: 0,
  msg: 'this is a template',
  time: '2016-06-18'
}
-->


//wxml代碼
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>


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

<!-- 輸出
0: this is a template Time: 2016-06-18
-->

data="{{…item}}"中的…是ES6中的擴展運算符，該運算符主要用於函數調用，在這裏的作用是調用了name=msgItem的模板。

------------------華麗的分割線----------------------

cart.wxml

<import src="../../template/template-cart/template-cart.wxml"/>

<view class="container"> 
	<template is="cart-list" data="{{...goodsList}}"/>	
</view>

cart.js

Page({
  data: {
	  goodsList: {
		  list: []
	  }
  },
 
  onShow: function () {
	  var shopList = [0];
	  var shopCarInfoMem = wx.getStorageSync('shopCarInfo');
	  if (shopCarInfoMem) {
		  shopList = shopCarInfoMem.shopNum
	  }
	  this.data.goodsList.list = shopList;
	  this.setGoodsList(shopList);
  },
  setGoodsList: function (list) {
	  this.setData({
		  goodsList: {
			  list: list
		  }
	  });
  },
  selectTap: function() {
	  console.log('點擊商品')
  },
  touchS: function (e) {
	  console.log(e)
  },
  touchM: function (e) {
	  console.log(e)
  },
  touchE: function (e) {
	  console.log(e)
  }
}) 

template-cart.wxml

<template name="cart-list">

	<block wx:if="{{list == 0}}">
		<view class="kong">
			購物車空空如也～
		</view> 
	</block>

	<block wx:else>
		<view class="list-top">
			<view class="label">購物車 共有 {{list}} 件物品</view>
			<view class="edit-btn">編輯</view>
		</view>
		<view class="goodsList">
			<view class="a-gooods" wx:for="{{list}}" wx:key="{{index}}">
				<view class="a-goods-conts {{item.active? 'active':''}}"  
					bindtap="selectTap" 
					bindtouchstart="touchS" 
					bindtouchmove="touchM" 
					bindtouchend="touchE">
					<view class="goods-info">
						<view class="img-box">
							<image src="/image/new.jpg" class="img"/>
						</view>
						<view class="text-box">
							<view class="goods-title">水果</view>
							<view class="goods-label">重量：1kg</view>
							<view class="goods-price">¥ 100</view>
							<view class="buy-num">
								<view class="jian-btn">-</view>
								<input type="number" value="1" disabled/>
								<view class="jia-btn">+</view>
							</view>
						</view>
					</view>
					<view class="delete-btn" data-index="{{index}}">
						刪除
					</view>
				</view>
			</view>
			<view class="jiesuan-box">
				<view class="left-price">
					<view class="all-selected">全選</view>
					<view class="total">合計：¥ 0</view>
				</view>
				<view class="to-pay-btn">去結算</view>
			</view>
		</view>
	</block>
</template>