关于微信小程序template无法直接绑定事件处理函数的问题

当我们需要为template绑定事件处理函数时，是不能在template上直接绑定的，需要为template外层添加一层view标签，在这个外层view标签上绑定事件处理函数，示例代码如下：

<view bindtap='yourFunctionName'>
   <template is='yourTemplate' />
</view>

上述示例代码为template绑定了一个点击事件的处理函数'yourFunctionName'，用户在点击这个template的时候会由该函数进行响应并处理，如果像下述代码一样直接为template绑定事件，则该点击操作无法正常响应

<template is='yourTemplate' bindtap='yourFunctionName' />

问题原因：

当在进行页面渲染遇到template时，模板引擎会将template转化为你定义template时的那块代码，并将template上的属性传递进去（最常见的的是data属性）,但是事件绑定是无法进行传递的,举个例子：

定义如下template

<template name='HelloWord'>

<text>{{myData}}</text>

</template>

这个template很简单，就是在页面上以文本方式显示传递过来的数据

下面我们使用该模板

<!-- 代码所处上下文 -->

<template is='HelloWord' data='{{myData}}' />

<!-- 代码所处上下文 -->

则当在真正页面渲染时，解析的其实是如下代码

<!-- 代码所处上下文 -->

<text>{{myData}}</text>

<!-- 代码所处上下文 -->

如果直接为template绑定点击事件处理函数

<!-- 代码所处上下文 -->

<template is='HelloWord' bindtap='yourFunctionName' data='{{myData}}' />

<!-- 代码所处上下文 -->

由于绑定事件无法传递进入template里面，所以实际上解析的代码还是

<!-- 代码所处上下文 -->

<text>{{myData}}</text>

<!-- 代码所处上下文 -->

所以无法正常响应该点击事件

当我们为template套一层view，并在view上绑定事件时

<!-- 代码所处上下文 -->

<view bindtap='yourFunctionName'>

<template is='HelloWord' data='{{myData}}' />

</view>

<!-- 代码所处上下文 -->

页面渲染时解析的代码是

<!-- 代码所处上下文 -->

<view bindtap='yourFunctionName'>

<text>{{myData}}</text>

</view>

<!-- 代码所处上下文 -->

所以该点击事件可以正常响应

根据上述原理，可以知道，在template内部绑定的的事件处理函数是可以正常响应的，如

<template name='HelloWord'>

<text bindtap='yourFunctionName'>{{myData}}</text>

</template>

页面渲染时解析的代码是

<!-- 代码所处上下文 -->

<text bindtap='yourFunctionName'>{{myData}}</text>

<!-- 代码所处上下文 -->

所以在template内部绑定的的事件处理函数是可以正常响应的

版权声明：本文为博主原创文章，转载请注明出处