收藏
回答

嵌套template事件绑定无效

问题模块
API和组件

这是无项目的目录结构:


在pages/index/index.wxml中引用模板:

<!--index.wxml-->
 
<import src="../common/movie-list.wxml"/>
 
<loading hidden="{{!isLoading}}">加载中...</loading>
<template wx:if="{{!isLoading}}" is="movie-lists" data="{{answers,layerlayer,swiper}}"/>

在pages/index/index.js中顶事件处理函数:

const https = require('../../public/js/douban.js')
//index.js
//获取应用实例
var app = getApp()
Page({
  //单选逻辑
  tapRadio:function(e){
   console.log("tapRadio");
  },
  //多选逻辑
  tapCheckbox:function(e){
    console.log("tapCheckbox");
  },
  //答案判断逻辑
  
  //页码切换列表效果
  pageClick:function(){
    console.log("pageClick");
  },
});

在pages/common/movie-list.wxml中定义模板:

<!-- 渲染普通的单项数据 -->
<template name="radio">
  <view class="container">
    <block wx:for="{{itemList.options}}">
      <view class="list {{item.class}}" data-option="{{[item,index,idx]}}" bindtap="tapRadio">//tapRadio这个事件不能够的触发
        <view class="number"> {{item.tip}}</view> {{item.content}}
      </view>
    </block>
  </view>
</template>
 
<!-- 渲染普通的多选数据 -->
<template name="checkbox">
  <view class="container">
    <block wx:for="{{itemList.options}}">
      <view class="list {{item.class}}" data-option="{{[item,index,idx]}}" bindtap="tapCheckbox">//tapCheckbox这个事件不能够的触发
        <view class="number"> {{item.tip}}</view> {{item.content}}
      </view>
    </block>
  </view>
  <view class="btn" bindtap="tapSelect">确定</view>
</template>
 
<!-- 题目选择模层 -->
<template name="layer">
  <scroll-view class="status-lists" scroll-y="true">
    <block wx:for="{{answers.allLists}}">
      <view bindtap="setActiveNum" data-option="{{index}}" wx:if="{{item.isAnswer == 0}}" class="status-list {{answers.activeNum == index?'active':''}}">{{index+1}}</view>
      <view bindtap="setActiveNum" data-option="{{index}}" wx:if="{{item.isAnswer == 1}}" class="status-list success  {{answers.activeNum == index?'active':''}}">{{index+1}}</view>
      <view bindtap="setActiveNum" data-option="{{index}}" wx:if="{{item.isAnswer == 2}}" class="status-list error  {{answers.activeNum == index?'active':''}}">{{index+1}}</view>
    </block>
  </scroll-view>
</template>
 
<!-- 试题详解 -->
<template name="tip">
  <view class="resolve">
    <view class="h1">试题详解</view>
    {{itemList.tip}}
  </view>
</template>
 
<!-- 页面题目模板 -->
<template name="movie-list">
  <view class="header">
    <view class="xuanz">{{itemList.type}}</view>
    {{itemList.content}}
  </view>
  <view class="poster" wx:if="{{!!itemList.media_type && !!itemList.media_url}}">
    <image mode="aspectFit" wx:if="{{itemList.media_type == 1}}" src="{{itemList.media_url}}"></image>
    <video wx:if="{{itemList.media_type == 2}}" src="{{itemList.media_url}}"></video>
  </view>
 
  <template wx:if="{{itemList.type == '多选'}}" is="checkbox" data="{{itemList,idx}}" />
  <template wx:else is="radio" data="{{itemList,idx}}" />
 
  <!--<template is="tip" data="{{answers,itemList}}"/>-->
</template>
<!-- 题目展示页面 -->
<template name="movie-lists">
  <view class='swiper-lists' catchtouchend='touchEnd' catchtouchstart='setEvent'>
    <block wx:for="{{answers.list}}" wx:for-item="itemList" wx:for-index="idx">
      <view wx:if="{{idx == swiper.active-1}}" class='swiper-list prev' animation="{{swiper.animationO}}">
        <template is="movie-list" data="{{idx,itemList,answers,layerlayer}}" />
      </view>
      <view wx:if="{{idx == swiper.active}}" class='swiper-list' animation="{{swiper.animationT}}">
        <template is="movie-list" data="{{idx,itemList,answers,layerlayer}}" />
      </view>
      <view wx:if="{{idx == swiper.active+1}}" class='swiper-list next' animation="{{swiper.animationS}}">
        <template is="movie-list" data="{{idx,itemList,answers,layerlayer}}" />
      </view>
    </block>
  </view>
  <view hidden="{{!layerlayer.isLayerShow}}" class="footer-layer" bindtap="layerFooterClick"></view>
  <view class="footer" animation="{{layerlayer.layerAnimation}}">
    <view class="count">
      <view class="collect" wx:if="{{!answers.list.isStore}}" bindtap="collectList">收藏</view>
      <view class="collect active" wx:else bindtap="collectList">收藏</view>
      <view class="page" bindtap='pageClick'>{{answers.activeNum + 1}}/{{answers.allLists.length}}</view>//pageClick这个事件能够正常的触发
      <view class="success">{{answers.success}}</view>
      <view class="error">{{answers.error}}</view>
    </view>
    <template is="layer" data="{{answers,layerlayer}}" />
  </view>
</template>

在模板中pageClick这个事件函数能够正常调用,但是tapRadio,tapCheckbox等这些嵌套在模板中的事件却无法绑定成功,请问这是什么原因啊?

我在微信开发工具中也无法知道事件是否绑定成功,这种问题该怎么调试啊?

希望有大神能帮忙分析下原因,谢谢.

最后一次编辑于  2017-11-23  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答