使用流星模板助手获取 DOM 元素
Posted
技术标签:
【中文标题】使用流星模板助手获取 DOM 元素【英文标题】：Get DOM element using meteor template helpers 【发布时间】：2014-01-13 20:58:27 【问题描述】：例如我的html是
<template name="atest">
<a href="route" data-test="test">Click</a>
</template>
在流星模板助手中，我希望能够选择锚标记。
Template.atest.route = function()
console.log(this.data-test);
;
我不确定这是否可以做到，但可以肯定的是，我尝试过的任何方法都无法做到。我知道有一种方法可以在模板实例中传递参数，但我不希望这样。我希望能够选择模板实例所在的锚标记并对其进行处理。
感谢我能得到的任何帮助。
【问题讨论】：
【参考方案1】：不是在助手中，而是在rendered 回调中你可以这样做：
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 ;
;
【讨论】：
基本上相同的模板在 DOM 中生成了几次。现在我正在尝试根据其在 dom 中的位置将 href 属性附加到锚标记。但是您可能是对的，最好使用事件单击或悬停路线。现在我也在尝试使用 jquery 的 Deps.autorun ，这似乎也很好。 @Bads 查看我的编辑。我知道在您的 OP 中您说您不想将数据参数传递给您的链接模板。有什么理由吗？正如您在我的编辑中看到的那样，这种方法非常灵活，并且是真正的 Meteor 方法。在#each 块中，您甚至不需要使用参数。需要零个 jQuery。
@Bads 还请注意，如果您只在 Deps.autorun 中使用 jQuery，则该函数实际上不会重新运行，并且可能不会在模板更改时影响您的模板。您需要使用反应式数据源驱动自动运行功能。如果您正在实现响应式数据源以在数据更改时在自动运行函数中进行 DOM 操作，那么您确实会陷入过程和模板驱动编程之间的阻抗不匹配。 Meteor 模板引擎的重点是它会为您完成所有这些工作。
天哪！你完全解决了它......我试图想出这样的东西好几天了。谢谢！！我不想传递数据的原因是，无论在 DOM 中的何处生成，都会传递相同的数据，而且我不知道这会有什么帮助。以上是关于使用流星模板助手获取 DOM 元素的主要内容，如果未能解决你的问题，请参考以下文章