[英]How to perform event bubbling in meteor template helper
I'm trying to capture data of the whole {{#each categories}}
but my button .toggle-addToSet
I use to do that is not capturing all the way to the top, it's only capturing data for {{#each set}}
which is within {{#each categories}}
unfortunately the data I need is not in there, therefore I need a way to capture data beyond {{#each set}}
all the way to {{#each categories}}
我正在尝试捕获整个
{{#each categories}}
数据,但我使用的按钮.toggle-addToSet
并没有捕获到顶部,而是仅捕获了{{#each set}}
{{#each categories}}
遗憾,我所需的数据不在其中,因此我需要一种方法来捕获{{#each set}}
以外的数据,一直到{{#each categories}}
this is what it looks like in the HTML 这就是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>
In my template helper, it's like this 在我的模板助手中,就像这样
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
}
});
where var ob = this
is only capturing 其中
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}}
But as discussed, I need it to capture the whole document ie 但是正如讨论的那样,我需要它来捕获整个文档,即
{{#each categories}}
capture everything in here
{{/each}}
When you're calling {{#each set}}...{{/each}}
you're changing the context of inner block. 当您调用
{{#each set}}...{{/each}}
您正在更改内部块的上下文。
I'm suggesting to use {{#each catSet in set}}...{{/each}}
this won't change the context of the each
block, but will introduce new catSet
variable, as described here 我建议使用
{{#each catSet in set}}...{{/each}}
这不会更改each
块的上下文,但是会引入新的catSet
变量,如此处所述
In your case: 在您的情况下:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.