例如,我的
HTML是
<template name="atest">
<a href="{{route}}" data-test="test">Click</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]"); // 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")
}
});
当然,你也可以这样做：
Template.atest.events({
"click a[data-test]": function() {
// ...
}
});
如果这些选项都不适合您,您可能需要重新评估您的方法.需要从辅助函数访问元素表示您正在尝试使用过程编码样式而不是模板驱动样式.通常,不要将数据存储在DOM节点上,将其存储在模板的上下文对象中.
你能否提供一些关于你究竟想做什么的额外背景？可能有更好的方法.
想一想：必须调用帮助器才能呈现元素.如果元素甚至不存在,您将如何访问该元素？
编辑：这是一种模板驱动的方法,用于将href属性附加到模板,具体取决于模板的定义位置.基本上,您希望包含必要的数据以在任何关联的父模板中生成链接模板.然后,只需使用该数据调用链接模板：
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 };
};
}
