使用流星模板助手获取 DOM 元素

Question

例如我的html是

<template name="atest">
 <a href="{{route}}" data-test="test">Click</a>
</template>

在流星模板助手中，我希望能够选择锚标记。

Template.atest.route = function() {
 console.log(this.data-test);
};

我不确定这是否可以做到，但可以肯定的是，我尝试过的任何方法都无法做到。我知道有一种方法可以在模板实例中传递参数，但我不希望这样。我希望能够选择模板实例所在的锚标记并对其进行处理。

感谢我能得到的任何帮助。

Answer 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 };
  };
}