Question

只有删除每个块时才会触发事件。该事件的作用是在元素上应用垂直手风琴滑动向下过渡。我想要做的是在我的视图中显示相同的向下滑动过渡到我的所有文档。

现在，当我添加每个块来遍历我的集合并显示我的集合中的所有文档时，下滑事件就会停止工作。

这是我的模板：

<template name="auctionsList">


   <div class="container">

       <div id='cssmenu'>

           <ul> 
            {{#each auctions}}
                {{>auction}}
            {{/each}}
           </ul>          

        </div> <!-- end cssmenu -->

   </div><!-- end container -->

      {{#if isReady}}
          {{#if hasMoreauctions}}
              <a class="load-more btn btn-default center-block text-uppercase" id="loadMore" href="#" style="margin-top:10px;">Load More</a>
          {{/if}}
      {{else}}
          <div class="loading">{{>spinner}}</div>
      {{/if}}
  </template>



  <template name="auction">
     <li class='has-sub'>     
        <a href='#'>      
            <div class="auction-image">
                <img src="brand_logos/DominosPizza.png" class="img-responsive" height="200" width="200">
            </div>


            {{> durationLeft}}         
        </a>


        <ul>
           <li><a href='#'>
            <span>Sub Product</span></a></li>
        </ul>

     </li>           
  </template>

这是我的渲染/助手

Template.auctionsList.rendered = function () {  


                    $('#cssmenu li.has-sub>a').on('click', function(){


                    $(this).removeAttr('href');
                    var element = $(this).parent('li');
                    if (element.hasClass('open')) {
                        element.removeClass('open');
                        element.find('li').removeClass('open');
                        element.find('ul').slideUp();
                    }
                    else {
                        element.addClass('open');
                        element.children('ul').slideDown();
                        element.siblings('li').children('ul').slideUp();
                        element.siblings('li').removeClass('open');
                        element.siblings('li').find('li').removeClass('open');
                        element.siblings('li').find('ul').slideUp();
                    }


                });
            }

Template.auctionsList.helpers({

                auctions: function () {
                    return Template.instance().userauctions();
                }
  });


Template.auctionsList.events({
'click #cssmenu li.has-sub>a' : function(event, template) {
    $(this).removeAttr('href');
    var element = $(this).parent('li');
    if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp();
    }
    else {
        element.addClass('open');
        element.children('ul').slideDown();
        element.siblings('li').children('ul').slideUp();
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp();
    }


}
});

Answer 1

您应该将其从渲染移动到事件。 $('#cssmenu li.has-sub>a').on('click', function(){ }

Answer 2

将事件放在您的<li>标记所在的拍卖模板中。

<强>更新

基于你发表的要点的一些事情：

1）你应该尝试不直接在模板中使用脚本标签 - 我还没有经常看到这个。将所有此代码移至

Template.accordion.rendered = function(){ //here };

或者更好地使它在auctionsList中工作，因为它每次迭代都不会重复x次。

但更好的是不要让＆＃39; on＆＃39;事件。你应该使用流星事件......就像你在之前的帖子中提到的那样。流星事件可以访问这个＆＃39;这是当前的上下文项目。

我会尝试将它放在主auctionList模板上的模板事件中，然后担心它将如何与子模板一起使用。

2）我不认为你需要将所有内容添加到另一个模板中，手风琴模板确实不需要存在，你可以放弃将其放入拍卖模板中（考虑使用偶数拍卖进行点击事件，因为如果你这样做你的js片段不会重复x次每个帖子列表。你只需要这一次..

3）当您在拍卖模板中创建li时，在该点为其指定一个ID

<li id={{new accordion code in auction template}}>

然后，您可以在模板点击事件中引用此ID。如果您是meteor的新手，请帮助自己，并在点击事件中执行以下操作以更好地了解正在发生的事情（您很可能会在其中一个值中找到所需的ID - 很可能是这样：

Template.YourTemplate.events({
    'click any button in your each': function(event,bl,value)
    {
        console.log(event);
        console.log(bl);
        console.log(value);
        //and most importantly
        console.log(this);
    }
});

我知道它不是＆＃34;答案＆＃34;但我希望它能引导你走向正确的方向。

当我将每个块添加到模板中以迭代集合时，为什么我的点击事件不会触发（Meteor）

2 个答案: