CODEWITHSUNDEEP
javascriptmeteorhandlebars.js
Giant Elk
Giant Elk

Reputation: 5685

How to refactor Handlebars template and helper code in Meteor when pass parameters?

Any idea how to allow my BioPic Handlebars helper (I'm using Meteor) to allow different contexts for the param 'owner'. I'm calling showBioPic as a partial from another template i.e.

<template name="myMain">
    {{#each post}}
        {{> showBioPic}}
    {{/each}}
    Do a bunch of other stuff here too.
</template>

I want be able to pass in different 'owner' values depending on the calling template, i.e. Meteor.userId, post.owner, anotherUsersId. i.e. if I used {{#each user}} this doesn't have an owner field, it has a userId, so BioPic helper would not work.

<template name="showBioPic">        
    {{#with BioPic owner}}
        <img src="{{cfsFileUrl 'size48x48gm'}}" alt="Profile Picture: {{_id}}">
    {{else}}
        <img class="showShared" src="images/default-biopic-48x48.png" alt="Default Profile Picture">
    {{/with}}
</template>


Template.showBioPic.BioPic = function (IN_ownerId)    
   return BioPicsFS.findOne( { owner: IN_ownerId });
};

Upvotes: 0

Views: 369

Answers (2)

David Weldon
David Weldon

Reputation: 64312

I'm not certain if I understand the details of your problem, but in one of my projects I do something like this:

Handlebars.registerHelper('BioPic', function(user) {
  if (_.isString(user)) {
    // assume user is an id
  } else {
    // assume user is an object like Meteor.user()
  }
});

Handlebars helpers are just functions, so you you can test the value of the parameter passed to them and act accordingly. In the above example, when user is a string we could assume it's an id and return something like Pictures.findOne({owner: user});. You can just add more clauses based on all possible variations of the user input.

Upvotes: 0

Christian Fritz
Christian Fritz

Reputation: 21364

If using a Template helper is an option, then something like this should work:

Template.myMain.helpers({
  showBioPicWithContext: function (owner) {
    return Template.showBioPic(owner);
  }
});

<template name="myMain">
    {{#each post}}
        {{showBioPicWithContext id}}
    {{/each}}
    Do a bunch of other stuff here too.
</template>

<template name="showBioPic">
    {{#if _id}}
        <img src="{{cfsFileUrl 'size48x48gm'}}" alt="Profile Picture: {{_id}}">
    {{else}}
        <img class="showShared" src="images/default-biopic-48x48.png" alt="Default Profile Picture">
    {{/if}}
</template>

Upvotes: 1

Related Questions