小程序模板網(wǎng)

微信小程序 template 模板標(biāo)簽接受對(duì)象或數(shù)組作為 data 參數(shù)

發(fā)布時(shí)間:2018-05-04 15:48 所屬欄目:小程序開(kāi)發(fā)教程

官網(wǎng)案例是直接用對(duì)象擴(kuò)展運(yùn)算符傳遞一些簡(jiǎn)單數(shù)據(jù);

實(shí)際項(xiàng)目中,我需要傳遞一個(gè)數(shù)組,該數(shù)組的每一項(xiàng)都是一個(gè)對(duì)象,來(lái)實(shí)現(xiàn)一個(gè)比較復(fù)雜一點(diǎn)的模板功能;

最初的解決方案是套用官網(wǎng)的案例在wxml中使用循環(huán),把每次循環(huán)的item也就是數(shù)組項(xiàng)作為參數(shù)傳遞到模板中,這就跟官網(wǎng)案例很相似;

但是這樣做的一個(gè)問(wèn)題就是代碼還是感覺(jué)有點(diǎn)臃腫,本身作為模板最終的渲染邏輯應(yīng)該是包含整個(gè)循環(huán)在內(nèi)的,現(xiàn)在卻把循環(huán)放到了代碼中。這樣用模板的意義就基本上沒(méi)有了,優(yōu)勢(shì)也不存在了;

實(shí)例代碼:

<!-- tmpl模板代碼 -->
<template name="asd">
  <text>{{name}}</text>
</template>

<!-- 主題代碼 -->
<block wx:for="{{item.data.singer}}">
  <block wx:if="{{index > 0}}"> / </block>
  <template is="asd" data="{{...item}}" />
</block>

經(jīng)過(guò)思考,發(fā)現(xiàn)可以這樣來(lái)實(shí)現(xiàn);

<!-- tmpl模板代碼 -->
<template name="abc">
  <block wx:for="{{array}}">
    <text><block wx:if="{{index > 0}}"> / </block>{{item.name}}</text>
  </block>
</template>

<!-- 主題代碼 -->
<template is="abc" data="{{array: item.data.singer}}" />

嗯,看起來(lái)確實(shí)簡(jiǎn)潔很多了呢?。。?/p>



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24226.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢