Question

88

Get DOM element using meteor template helpers

rated 0 times [ 95] [ 7] / answers: 1 / hits: 16551 / 11 Years ago, thu, december 26, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

felixa

Add To Favorites

Follow

Total Points: 180

Total Questions: 113

Total Answers: 108

Location: Palau

Member since Sat, Aug 21, 2021

3 Years ago

answered 11 Years ago blaisep · Accepted Answer

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

  };

}