Using attributes in <template>

help
1

is it possible to apply and access extra attributes to a <template> tag?

e.g.

<template name="foo" color="blue">

later on, access the color attribute from anywhere in the code

2

It depends on what you mean by “anywhere”. Within the Template callbacks you are able to access these attributes, e.g.

Template.foo.rendered = function() {
  var name = this.data.name;
  var color = this.data.color;
  ... do something here ...
}
3

Thanks for the reply, but that’s incorrect.

these attributes are available when you include a template and specify data context:

{{> foo color="blue" }}

but that isn’t the case.
I have a use case of traversing the view tree, inspecting the templates and looking for a certain template (not even an instance of it)
I’d like to use an extra attribute on the template tag in order to do that inspection

4

Initialize an array in your lib:

myTemplates = [];

and within your code, whenever you create a new template, do something like:

myTemplates.push({name: 'myNewTamplate', property:'specialTemplate' });

or just use the original array as a reference and type in the template names there, I find this method easier for keeping track of a modularized structure

Then whenever you need to access the templates that are specialTemplates refer to them like:

_.each(_.where(myTemplates, {property: 'specialTemplate'}), function(template) {
  Template[template.name].events({
    'click': function(e) {
      console.log('You clicked somewhere on: ' + template.name + ' template.');
    }
  });
})

Of course, you can use the wonderful https://atmospherejs.com/aldeed/template-extension package to manage, access and manipulate your templates on the fly.

1 Like
5

interesting suggestion, but this wouldn’t work for a general solution (package) :smile:
thanks though

6

I’m happily mixing Polymer and Meteor templates in my project and it works fine. :slight_smile: So that’s always an option to make this work, too.

7

@rdrey sadly, spiderable doesn’t like Polymer (PhantomJS has problems with webcomponents.js)
so I had to drop Polymer, which seemed promising for all my UI needs

also, Polymer is still very experimental outside Chrome (read performance issues or unexpected behavior requiring tedious crossplatform testing), so I wouldn’t recommend it for production

8

You could give prerender.io a try instead of phantomjs

9

Oh damn, thanks for the warning @chenroth … I haven’t tried out spiderable yet. (But have read about it.) Large parts of my app I don’t want to be crawled, though.

Would spiderable work if I keep just a few pages like the homepage ‘Polymer free’? According to this issue Polymer in PhantomJS is still quite far from done.

Thanks for the https://prerender.io/ tip, @serkandurusoy. It seems a bit pricy, but might be worth it. I really like the encapsulation that Polymer components give me - otherwise I should probably switch to React soon.