Meteor:如何访问嵌套模板中的父属性? [英] Meteor: how to access parent properties within nested templates?

问题描述

我正在开始使用 Meteor，并调整 todo 示例 以包含嵌套标签组.我有以下 HTML，它输出每个标签组的每个名称，以及每个组中的标签列表:

 <模板名称="tag_filter">{{#each tag_types }}{{ 标签名称 }}{{#每个值}}<div data-taggroup="{{ ../tag_name }}">{{名称}}({{计数}})

{{/每个}}{{/每个}}

我的问题是:我如何调整事件处理程序以点击标签以访问父组的tag_name 的值?(即来自外部每个循环的数据).

目前我有下面的代码，但是this 对象只允许我访问name 和count.

Template.tag_filter.events({'mousedown .tag':函数(){console.log('tag mousedown', this);//如何获取 tag_name 的值?}});

如您所见，我使用了 Handlebars 父路径 来添加 data-taggroup 属性包含名称，但我不确定如何从事件处理程序中访问它.

我认为这个问题是相关的，但我不明白 OP 的解决方案(部分原因是我没有使用 Coffeescript).还有一个相关的 已关闭的 Meteor 问题.

解决方案

我不确定您是否可以获取父模板数据，但是在您的事件处理程序中您可以访问 DOM 元素:event.currentTarget 将获得被点击的元素.然后只需使用 jQuery 访问属性.如果需要，event.currentTarget.parentNode 将获取 DOM 中的父元素.

例如:我不知道你把标签类放在哪里，但假设它是你定义数据标签组的 div 类.然后您可以使用以下方法获取标签名称:

$(event.currentTarget).attr('data-taggroup')

I am getting started with Meteor, and adapting the todo example to include nested tag groups. I have the following HTML, which outputs each name of each tag group, plus the list of tags in that each group:

  <template name="tag_filter">
    {{#each tag_types }}
      {{ tag_name }}
      {{#each values }}
        <div data-taggroup="{{ ../tag_name }}">
        {{ name }} ({{ count }})
        </div>
      {{/each}} 
    {{/each}}
</template>

My question is this: how do I adapt the event handler for clicks on the tags to access the value of the parent group's tag_name? (i.e. the data from the outer each loop).

Currently I have the code below, but this object only gives me access to name and count.

Template.tag_filter.events({
  'mousedown .tag': function () {
    console.log('tag mousedown', this);
    // How do I get the value of tag_name?
  }
});

As you can see, I've used Handlebars parent paths to add a data-taggroup attribute containing the name, but I'm not sure how to access that from within the event handler.

I think this question is related, but I don't understand the OP's solution (partly because I'm not using Coffeescript). There's also an closed Meteor issue which is related.

解决方案

I'm not sure whether you can get parent template data, but in your event handler you can access DOM elements: event.currentTarget will get the clicked element. Then just use jQuery to access attributes. If needed, event.currentTarget.parentNode will get the parent element in the DOM.

Ex: I don't know where you put the tag class, but let's say it's the class of your div where data-taggroup is defined. Then you could get the tag name using:

$(event.currentTarget).attr('data-taggroup')

这篇关于Meteor:如何访问嵌套模板中的父属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！