Get DOM element using meteor template helpers

2019-03-11 09:01发布

站内问答 / JavaScript
1312 1 5

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.

1条回答
Anthone
2楼-- · 2019-03-11 09:47

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 };
  };
}
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)