标签：网上 标签 inter 实现 属性 对象 operation 运用 div
微信小程序视图层提供了 模板(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>
这样点击模板中的具体元素就可以调用该方法了。虽然这样可以调用事件方法，但是仅适用于结构简单，且是循环出来的节点(因为基本功能都一样，操作也基本相同)。但对于结构复杂，功能需求不同的节点则不能适用。这个时候就只能具体节点具体功能具体定义事件了。
当然绝大部分模板的交互功能都不多，既然都在用模板了，那么肯定是以数据展示为主，没事去操作它干嘛。包含大量操作和交互功能的直接写页面，谁还整模板，自己坑自己么。
微信小程序开发--模板(template)使用，数据加载，点击交互
标签：网上 标签 inter 实现 属性 对象 operation 运用 div
原文地址：https://www.cnblogs.com/donghuang/p/9670457.html
