javascript - 如何在 meteor 模板助手中执行事件冒泡

Question

我正在 try catch 整个 {{#eachcategories}} 的数据，但我用来执行此操作的按钮 .toggle-addToSet 并未捕获所有数据到顶部的方式，它仅捕获 {{#each set}} 的数据，该数据位于 {{#eachcategories}} 中，不幸的是我需要的数据不在因此，我需要一种方法来捕获 {{#each set}} 之外的数据，一直到 {{#eachcategories}}

这就是 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}}时，您正在更改内部 block 的上下文。

我建议使用 {{#each catSet in set}}...{{/each}} 这不会改变 each 的上下文> block ，但会引入新的 catSet 变量，如 described here

就您而言:

<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>