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

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>