当我们需要为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很简单,就是在页面上以文本方式显示传递过来的数据
下面我们使用该模板
则当在真正页面渲染时,解析的其实是如下代码
如果直接为template绑定点击事件处理函数
由于绑定事件无法传递进入template里面,所以实际上解析的代码还是
所以无法正常响应该点击事件
当我们为template套一层view,并在view上绑定事件时
页面渲染时解析的代码是
所以该点击事件可以正常响应
根据上述原理,可以知道,在template内部绑定的的事件处理函数是可以正常响应的,如
页面渲染时解析的代码是
所以在template内部绑定的的事件处理函数是可以正常响应的
版权声明:本文为博主原创文章,转载请注明出处