如何在流星模板助手中执行事件冒泡

Question

我正在尝试捕获整个{{#each categories}}数据，但我使用的按钮.toggle-addToSet并没有捕获到顶部，而是仅捕获了{{#each set}} {{#each categories}}遗憾，我所需的数据不在其中，因此我需要一种方法来捕获{{#each set}}以外的数据，一直到{{#each categories}}

这就是HTML中的样子

<ul>
  {{#each categories}}
  <li class="myIdd">
    <div class="row col s12 m7">
      <div class="card" id="cardId">
        <div class="card-image waves-effect waves-block waves-light">
          <a href="/latestSingle/{{_id}}"><img src="{{better_featured_image.source_url}}"></a>
        </div>
        <div class="card-content">
          <h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
          <a href="/latestSingle/{{_id}}">MORE</a> <a href="#modal2" class="modal-trigger waves-effect waves-light" onclick="Materialize.showStaggeredList('#bottom-options')"><i class="waves-effect waves-teal small material-icons right">playlist_add</i></a>{{>
          likePartial}}{{> reblogPartial}}

          <!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in  -->

          <div id="modal2" class="modal bottom-sheet">
            <div class="modal-content">
              <div class="row">

                <!-- data being captured is only below this, but i need it to capture up until li class ="myIdd" -->

                {{#each set}}
                <div class="col s6 m6 addSet teal">
                  <div class="card ">
                    <div class="card-image">
                      <span class="card-title cardSet">{{name}}</span>
                    </div>
                    <div class="card-footer">

                    <!-- This button is what i'm using to try and capture the data all the way to li class ="myIdd" -->

                      <button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
                    </div>
                  </div>
                </div>
                {{/each}}

                <!-- end of capture -->

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
 {{/each}}
</ul>

在我的模板助手中，就像这样

Template.summeryArticle.events({
  'click .toggle-addToSet': function(e, template) {
    var ob = this
    console.log(ob);
  }
});

其中var ob = this仅捕获

            {{#each set}}
                    <div class="col s6 m6 addSet teal">
                      <div class="card ">
                        <div class="card-image">
                          <span class="card-title cardSet">{{name}}</span>
                        </div>
                        <div class="card-footer">

                        <!-- This button is what I'm using to try and capture the data all the way to li class ="myIdd" -->

                          <button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
                        </div>
                      </div>
                    </div>
                    {{/each}}

但是正如讨论的那样，我需要它来捕获整个文档，即

{{#each categories}}
capture everything in here
{{/each}}

Answer 1

当您调用{{#each set}}...{{/each}}您正在更改内部块的上下文。

我建议使用{{#each catSet in set}}...{{/each}}这不会更改each块的上下文，但是会引入新的catSet变量，如此处所述

在您的情况下：

<ul>
  {{#each categories}}
  <li class="myIdd">
    <div class="row col s12 m7">
      <div class="card" id="cardId">
        <div class="card-image waves-effect waves-block waves-light">
          <a href="/latestSingle/{{_id}}"><img src="{{better_featured_image.source_url}}"></a>
        </div>
        <div class="card-content">
          <h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
          <a href="/latestSingle/{{_id}}">MORE</a> <a href="#modal2" class="modal-trigger waves-effect waves-light" onclick="Materialize.showStaggeredList('#bottom-options')"><i class="waves-effect waves-teal small material-icons right">playlist_add</i></a>{{>
          likePartial}}{{> reblogPartial}}

          <!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in  -->

          <div id="modal2" class="modal bottom-sheet">
            <div class="modal-content">
              <div class="row">

                <!-- data being captured is only below this, but i need it to capture up until li class ="myIdd" -->

                {{#each catSet in set}}
                <div class="col s6 m6 addSet teal">
                  <div class="card ">
                    <div class="card-image">
                      <span class="card-title cardSet">{{catSet.name}}</span>
                    </div>
                    <div class="card-footer">

                    <!-- This button is what i'm using to try and capture the data all the way to li class ="myIdd" -->

                      <button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
                    </div>
                  </div>
                </div>
                {{/each}}

                <!-- end of capture -->

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
 {{/each}}
</ul>