Best way to passing static parameters into a template

3,011 views
Skip to first unread message

Phil Cockfield

unread,
Nov 12, 2012, 9:45:14 PM11/12/12
to meteo...@googlegroups.com

I'm wanting to create some re-usable <template>'s.
I'd like to be able to pass in some static values (like CSS class-names or data attribute values), but I can't see how to do this. 

The Handlebars documentation says something like this is possible, eg

Handlebars helpers can also receive an optional sequence of key-value pairs as their final parameter (referred to as hash arguments in the documentation):

{{{link "See more..." href=story.url class="story"}}}


Handlebars.registerHelper('link', function(text, options)  { ....


But I can't seem to get anything like this to work in Meteor.  Is there another way to achieve this kind of thing.  It doesn't feel like the kind of thing you'd want to set in a Session variable, rather something you'd declare as an attribute in HTML.

What's the trick here?  Thanks guys!

Tom Coleman

unread,
Nov 13, 2012, 2:03:57 AM11/13/12
to meteo...@googlegroups.com
Hi Phil,

My understanding is that the options you have are as follows:

1. Pass the arguments into the template in the data context, i.e

{{with options}}
{{> template}}
{{/with}}

OR
{{> template options}}

The downside is that normally you want to pass data (as in something from mongo) in there, rather than view-specific stuff.

Obviously you can munge it with something like:

Template.foo.options = function() {
return {data: data, options = {alignRight: true, width: '200px'}}
}

But this feels a bit hacky, because you really want to write that stuff in the html file.

2. Create a helper that just calls a template:

{{templateHelper alignRight='true' width='200px'}}

Handlebars.registerHelper('templateHelper', function(options) {
// you can get the arguments at options.hash.X
return new HandlebarsSafeString(Template.foo(…));
}

This is the approach taken by loginButtons in accounts-ui.

This could be generalised to take the name of a helper as an argument, and do nice things (in …) to marshall the data + options for you.


Sidebar: Although it'd be nice to just extend {{>}} to take options, ala:
{{> template alignRight='true' width='200px'}}

I think the meteor guys are leery of doing this as they've already strayed away from core handlebars a bit already.


Too much information and no good answer to your question? Sorry about that :)

Tom
--
You received this message because you are subscribed to the Google Groups "meteor-talk" group.
To view this discussion on the web visit https://groups.google.com/d/msg/meteor-talk/-/Mv7K4p2pGk4J.
To post to this group, send email to meteo...@googlegroups.com.
To unsubscribe from this group, send email to meteor-talk...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/meteor-talk?hl=en.

Phil Cockfield

unread,
Nov 13, 2012, 3:39:25 AM11/13/12
to meteo...@googlegroups.com
Thanks Tom - that gives me something to go on.

I appreciate the detailed write up. 

Miro Radenovic

unread,
Feb 18, 2014, 5:21:21 AM2/18/14
to meteo...@googlegroups.com
Let me contribute on this: 
I have accomplished this (thx to Tom's inputs) in the following way:

this the template i want to use with parameters.

<template name="postSubmit">
{{displayMode}}
</template>

here is the handlebars helper used as a wrapper to pass parameter to template postSubmit

Handlebars.registerHelper('postSubmitHelper', function(options) {
    //add displayMode to the template
    Template.postSubmit.displayMode = function(){
        return options.hash.mode;
    }
    // render template
    return new Handlebars.SafeString(Template.postSubmit());
});


and finallly I can call postSubmit template and pass parameters by invoking postSubmitHelper:

{{postSubmitHelper mode='view'}}

that's it!
Reply all
Reply to author
Forward
0 new messages