微信小程序开发--模板(template)使用，数据加载，点击交互

　　微信小程序视图层提供了 模板(template)，能够在模板中定义代码片断，而后在不一样的地方调用。结果在数据渲染那懵逼了。按照官网上对模板的说明和对数据的加载。

一、定义模板

　　使用name属性，做为模板的名字。而后在<template/>内定义代码片断，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">　　//此处的name 有ID的意味，便于其余页面加载该模板时使用和查找
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

二、使用模板

　　先将模板的wxml文件和wxss文件路劲连接 导入到须要使用模板的wxml文件和wxss文件内，而后在须要导入模板的wxml文件内使用 is属性，声明须要的使用的模板，而后将模板所须要的data传入，如：

<import src="../template/msgItem/msgItem.wxml"/>　　　　
<template is="msgItem" data="{{...item}}"/>　　<!--{{...item}}  ...是将数据展开，即这样将数据传输到模板时，其实是将item按键值对展开-->
Page({
    data: {
        item: {
            index: 0,
            msg: 'this is a template',
            time: '2016-09-15'
        }
    }
});

@import "../template/msgItem/msgItem.wxss";

　　is属性 可使用Mustache语法，来动态决定具体须要渲染哪一个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

三、模板数据传入

　　在页面的 template 标签中将模板所须要的data传入，如：

<!--展开：-->
<template is="lookRecord"  data="{{...followRecords}}"/>

　　展开：传入的数据已经按键值对模式被一一展开，直接经过对象的属性就能获取对象中的值，这点跟VUE的模板使用差很少。但若是模板中存在 wx:for="{{followRecords}}" 运用，即传入的对象中某个属性的值是一个数组Array，系统则会报渲染结构错误，找不到属性。

，这时这种展开式传值就不行了。

 

　　那就采用不展开的形式。不展开：传入的数据在模板中按照属性一对一调用的方式获取数据，如：

<!--不展开：-->
<template is="lookRecord"  data="{{lookRecord}}"/>

<view class="information-feedback-area" wx:for="{{lookRecord.feedbackBasicInfor}}" wx:for-index="index" wx:for-item="indexData">
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[0].option}}</text>
            <image class="information-options-image" src="{{indexData[0].icon}}"></image>
        </view>
    </view>
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[1].option}}</text>
            <image class="information-options-image" src="{{indexData[1].icon}}"></image>
        </view>
    </view>
</view>

四、模板点击交互

　　在理清楚数据的获取和渲染后，模板中绑定事件，实现正常交互，就是最后的问题了。因为模板(template)没有本身的JS文件，因此模板的交互功能方法都是写在引用该模板的页面的JS控制模块内。如：

　　我在 detailedInformation 页面调用了 basicInformation模板，那么 模板basicInformation 内的全部交互功能都是写在detailedInformation.js内的。下面定义事件，如：

//detailedInformation.js
templateInteraction: function () {
    var tampData = this.data.item;
    tampData.clickAction = "nodeOperation ";
    this.setData({item: tampData})
},
nodeOperation: function () {
    console.log("模板交互功能方法执行！")
},

　　而后在模板中绑定该事件，如：

<template is="basicInformation" data="{{item}}"></template>

<template name="basicInformation">
    <view class="information-container">
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">电\r\t\r\t\r\t\r\t\r\t\r\t话1:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho1}}">{{basicInformation.phone1}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho1}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">电\r\t\r\t\r\t\r\r\t\r\t话2:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho2}}">{{basicInformation.phone2}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho2}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
    </view>
</template>

　　这样点击模板中的具体元素就能够调用该方法了。虽然这样能够调用事件方法，可是仅适用于结构简单，且是循环出来的节点(由于基本功能都同样，操做也基本相同)。但对于结构复杂，功能需求不一样的节点则不能适用。这个时候就只能具体节点具体功能具体定义事件了。

　　固然绝大部分模板的交互功能都很少，既然都在用模板了，那么确定是以数据展现为主，没事去操做它干吗。包含大量操做和交互功能的直接写页面，谁还整模板，本身坑本身么。