javascript 使用流星模板助手获取 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20780843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get DOM element using meteor template helpers
提问by Bads
For example my html is
例如我的 html 是
<template name="atest">
<a href="{{route}}" data-test="test">Click</a>
</template>
In meteor template helpers, I want to be able to select the anchor tag.
在流星模板助手中，我希望能够选择锚标签。
Template.atest.route = function() {
console.log(this.data-test);
};
I am not sure if this can be done or not, but certainly, it cannot be done via any method I have tried. I know there is a way to pass argument in a template instance, but I don't want that. I want to be able to select that anchor tag that template instance is in and do something with it.
我不确定这是否可以完成，但可以肯定的是，通过我尝试过的任何方法都无法完成。我知道有一种方法可以在模板实例中传递参数，但我不想要那样。我希望能够选择模板实例所在的锚标记并对其进行处理。
Appreciate any help I can get.
感谢我能得到的任何帮助。
回答by sbking
Not in helpers, but in the renderedcallback you can do:
不是在助手中，而是在rendered回调中，您可以执行以下操作：
Template.atest.rendered = function() {
var el = this.find("[data-test]");
};
And in event handlers:
在事件处理程序中：
Template.atest.events({
"click a": function( event, template ) {
var selectEl = template.find("[data-test]"); // Arbitrary element in template
var targetEl = event.target; // Element that triggered the event
var currentEl = event.currentTarget; // Element that is handling this event function (the element referenced by "click a")
}
});
Of course, you could also do:
当然，你也可以这样做：
Template.atest.events({
"click a[data-test]": function() {
// ...
}
});
If none of these options work for you, you might want to reevaluate your approach. Needing access to an element from a helper function indicates that you are trying to use a procedural coding style rather than a template-driven style. In general, don't store data on DOM nodes, store it in the template's context object.
如果这些选项都不适合您，您可能需要重新评估您的方法。需要从辅助函数访问元素表明您正在尝试使用过程编码风格而不是模板驱动的风格。一般情况下，不要将数据存储在 DOM 节点上，而是将其存储在模板的上下文对象中。
Could you give some additional context on what exactly you're trying to do? There might be a better way.
你能提供一些关于你到底要做什么的额外背景吗？可能有更好的方法。
Think about this: the helper has to be called in order to render the element. How would you be able to access the element if it doesn't even exist yet?
想一想：必须调用助手才能呈现元素。如果该元素还不存在，您将如何访问它？
Edit: here is a template-driven approach to attaching hrefattributes to a template depending on where it is defined. Basically, you want to include the necessary data to generate the link template in any associated parent template. Then, just call the link template with that data:
编辑：这是一种模板驱动的方法，href可根据定义的位置将属性附加到模板。基本上，您希望在任何关联的父模板中包含生成链接模板所需的数据。然后，只需使用该数据调用链接模板：
HTML:
HTML：
<body>
{{> parent1}}
</body>
<template name="parent1">
<div>
{{> link linkData}}
</div>
<ul>
{{#each arrayData}}
<li>{{> link}}</li>
{{/each}}
</ul>
{{#with arbitraryData}}
{{> parent2}}
{{/with}}
</template>
<template name="parent2">
<p>{{> link transformedData}}</p>
</template>
<template name="link">
<a href="{{href}}">{{text}}</a>
</template>
JS:
JS：
if (Meteor.isClient) {
Template.parent1.linkData = {
href: "/path/to/something",
text: "Parent Template 1 Link"
};
Template.parent1.arrayData = [
{ href: "array/path/1", text: "Array path one" },
{ href: "array/path/2", text: "Array path two" }
];
Template.parent1.arbitraryData = {
link: "/foo/bar/baz",
name: "Parent Template 2 Link"
};
Template.parent2.transformedData = function() {
return { href: this.link, text: this.name };
};
}
