关于微信小程序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内部绑定的的事件处理函数是可以正常响应的

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