How Do I Access an Object's Properties From a Template?

Samo picture Samo · Apr 19, 2012 · Viewed 11.4k times · Source

According to http://handlebarsjs.com/expressions.html, I should be able to do this:

<h1>{{article.title}}</h1>

But I can't seem to get this to work in meteor. Here's my template:

<template name="content">
  {{#if item}}
    <p>{{item.name}}</p>
  {{/if}}
</template>

Here's the JavaScript that returns the item:

  Template.content.item = function() {
    return Items.findOne({ _id: Session.get("list_id") });
  };

And yes, the item does indeed have a property called name :-)

When I do this, I see an error in Firebug that says ret is undefined

This can be tracked down to evaluate.js:

for (var i = 1; i < id.length; i++)
  // XXX error (and/or unknown key) handling
  ret = ret[id[i]];
return ret; 

At the moment of the error, ret references the window object. What's up with that?

Answer

Gabriel Dehan picture Gabriel Dehan · Apr 19, 2012

You should use {{#with object}}

If your object is something like :

my_object = {
    name : 'my_name',
    prop : 'my_prop'
}

In your template your can do :

<template name="my_template">
    {{#with my_object}}
        <p>Name is {{name}}<p>
        <p>Prop is {{prop}}</p>
    {{/with}}
</template>

Here you go :)