Question

例如我的html是

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

在meteor template helpers中，我希望能够选择锚标记。

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

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

1 个答案: