使用流星模板助手获取DOM元素 [英] Get DOM element using meteor template helpers
问题描述
例如我的html是
< template name =atest>
< a href ={{route}}data-test =test>点击< / a>
< / template>
在流星模板助手中，我希望能够选择锚标记。
Template.atest.route = function（）{
console.log（this.data-test）;
};
我不确定这是否可以完成，但肯定无法通过任何方式完成我试过的方法。我知道有一种方法可以在模板实例中传递参数，但我不希望这样。我希望能够选择模板实例所在的锚标签并对其执行操作。
欣赏我可以获得的任何帮助。
不在助手中，而是在呈现的回调中执行：
Template.atest.rendered = function（）{
var el = this.find（[data-test]）;
};
在事件处理程序中：
Template.atest.events（{
click a：function（event，template）{
var selectEl = template.find（[data-test]） ; //模板中的任意元素
var targetEl = event.target; //触发事件的元素
var currentEl = event.currentTarget; //处理此事件函数的元素click a）
}
}）;
当然，您也可以这样做：
< pre $ Template.atest.events（{
click a [data-test]：function（）{
// ...
}
}）;
如果这些选项都不适合您，您可能需要重新评估您的方法。需要从助手函数访问元素表明您正在尝试使用过程编码风格而不是模板驱动的风格。一般来说，不要将数据存储在DOM节点上，将它存储在模板的上下文对象中。
您可以给出一些额外的背景知道你想要做什么？可能有更好的办法。
想想这个：必须调用帮助器才能呈现元素。编辑：这里是一个模板驱动的方法来附加，如果它不存在，你将如何访问该元素？ href 属性取决于定义的位置。基本上，您想要包含必要的数据以在任何关联的父模板中生成链接模板。然后，只需使用该数据调用链接模板：
HTML：
<身体GT;
{{> parent1}}
< / body>
< template name =parent1>
< div>
{{> link linkData}}
< / div>
< ul>
{{#each arrayData}}
< 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：
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};
};
}
For example my html is
<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.
Not in helpers, but in the rendered callback you can do:
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.
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 href attributes 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:
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:
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 };
};
}
这篇关于使用流星模板助手获取DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
