× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Meteor: How to Use Object Literals in Blaze Templates

Christoph Wagner
Jun 02, 2016
<p>The other day, I was working on my upcoming <a href="http://t.umblr.com/redirect?z=https%3A%2F%2Fgithub.com%2FPandaWhisperer%2Fmeteor-yelp-clone&amp;t=NWQ0MmJjMmE4M2UzODNjZWNiZjYxOWU4YjIxNGZjYTEyZTg2YTliYix1YkZ6bTMxSw%3D%3D">Meteor Tutorial</a>, and I found myself wanting to pass a literal object to a template for testing purposes. This happens more often than you’d think — for instance, the excellent <a href="http://t.umblr.com/redirect?z=https%3A%2F%2Fgithub.com%2Fdburles%2Fmeteor-google-maps&amp;t=Y2IyYWJkYWQwY2JjNzJmZDJmZjJhY2U2NDM3YjZjYzMyNmYyOTIwNCx1YkZ6bTMxSw%3D%3D"><code>dburles:google-maps</code> package</a> takes a single <code>options</code>parameter in order to support the <a href="http://t.umblr.com/redirect?z=https%3A%2F%2Fdevelopers.google.com%2Fmaps%2Fdocumentation%2Fjavascript%2F3.exp%2Freference%23MapOptions&amp;t=ZmM2NDQzYzZjOWRhNzY1MjU2Y2I1MjVhNmYwZjMzMzIyNDczN2UwMix1YkZ6bTMxSw%3D%3D">bewildering amount of configuration settings available through the Google Maps API</a>:</p> <pre><code>{{&gt; googleMap name=<span style="color:rgb(113, 140, 0)">"map"</span> options=mapOptions}} </code></pre> <p>The correct solution, of course, is to create a <code>mapOptions</code> helper on the template containing the map, which then return an object. Sometimes, however, you just want to test something real quick and would like to be able to pass a literal object right in the template.</p> <p>If you follow your instinct, however, and write something like</p> <pre><code>{{&gt; <span style="color:rgb(137, 89, 168)">template</span> param={ foo: <span style="color:rgb(113, 140, 0)">"bar"</span>, things: [<span style="color:rgb(245, 135, 31)">1</span>, <span style="color:rgb(245, 135, 31)">2</span>, <span style="color:rgb(245, 135, 31)">3</span>] } }} </code></pre> <p>You’ll find out very quickly that <a href="http://t.umblr.com/redirect?z=https%3A%2F%2Fgithub.com%2Fmeteor%2Fmeteor%2Fissues%2F5095&amp;t=N2YzM2VlZDIxMzdiOWJjMGE0YjlmNDYzNzBmMjM4ZTc4N2U1ZTMxMix1YkZ6bTMxSw%3D%3D">Spacebars doesn’t support that kind of construct</a>. However, after fooling around a bit with a <a href="http://t.umblr.com/redirect?z=https%3A%2F%2Fgithub.com%2Fmeteor%2Fmeteor%2Fissues%2F5095%23issuecomment-149053809&amp;t=OTY2ODczMWE0MGI1YjYxMGNhNzI0ZmE5NWNmNGFhN2JhZGMxMzBmOSx1YkZ6bTMxSw%3D%3D">suggestion made in the comments</a>, I was able to figure out a workaround for this. I wrote two <a href="http://t.umblr.com/redirect?z=http%3A%2F%2Fdocs.meteor.com%2Fapi%2Ftemplates.html%23Template-registerHelper&amp;t=YzRmYjEzMmQwYmY2OTY2NGIxOTE0NjZkZjdmYzliODRjMWUwYmFmOCx1YkZ6bTMxSw%3D%3D">global template helpers</a> as follows:</p> <pre><code><span style="color:rgb(142, 144, 140)">// This allows us to write inline objects in Blaze templates</span> <span style="color:rgb(142, 144, 140)">// like so: {{&gt; template param=(object key="value") }}</span> <span style="color:rgb(142, 144, 140)">// =&gt; The template's data context will look like this:</span> <span style="color:rgb(142, 144, 140)">// { param: { key: "value" } }</span> Template.registerHelper(<span style="color:rgb(113, 140, 0)">'object'</span>, <span style="color:rgb(137, 89, 168)">function<span style="color:rgb(245, 135, 31)">({ hash })</span> </span>{ <span style="color:rgb(137, 89, 168)">return</span> hash; }); <span style="color:rgb(142, 144, 140)">// This allows us to write inline arrays in Blaze templates</span> <span style="color:rgb(142, 144, 140)">// like so: {{&gt; template param=(array 1 2 3) }}</span> <span style="color:rgb(142, 144, 140)">// =&gt; The template's data context will look like this:</span> <span style="color:rgb(142, 144, 140)">// { param: [1, 2, 3] }</span> Template.registerHelper(<span style="color:rgb(113, 140, 0)">'array'</span>, <span style="color:rgb(137, 89, 168)">function<span style="color:rgb(245, 135, 31)">()</span> </span>{ <span style="color:rgb(137, 89, 168)">return</span> <span style="color:rgb(245, 135, 31)">Array</span>.from(<span style="color:rgb(245, 135, 31)">arguments</span>).slice(<span style="color:rgb(245, 135, 31)">0</span>, <span style="color:rgb(245, 135, 31)">arguments</span>.length-<span style="color:rgb(245, 135, 31)">1</span>); }); </code></pre> <p>With these, you can now pass a literal object to any Meteor template as follows:</p> <pre><code>{{&gt; <span style="color:rgb(137, 89, 168)">template</span> param=(object foo=<span style="color:rgb(113, 140, 0)">"bar"</span>) }} </code></pre> <p>Will result in the template’s <code>param</code> looking like this:</p> <pre><code>{ <span style="color:rgb(234, 183, 0)">foo</span>:<span style="color:rgb(113, 140, 0)"> <span style="color:rgb(113, 140, 0)">"bar"</span> </span>} </code></pre> <p>You can also pass literal arrays:</p> <pre><code>{{&gt; <span style="color:rgb(137, 89, 168)">template</span> things=(<span style="color:rgb(245, 135, 31)">array</span> <span style="color:rgb(245, 135, 31)">1</span> <span style="color:rgb(245, 135, 31)">2</span> <span style="color:rgb(245, 135, 31)">3</span>) }} </code></pre> <p>This will result in the template’s data looking like this:</p> <pre><code>{ <span style="color:rgb(234, 183, 0)">things</span>:<span style="color:rgb(113, 140, 0)"> [<span style="color:rgb(245, 135, 31)">1</span>, <span style="color:rgb(245, 135, 31)">2</span>, <span style="color:rgb(245, 135, 31)">3</span>] </span>} </code></pre> <p>Both helpers can be combined:</p> <pre><code>{{&gt; <span style="color:rgb(137, 89, 168)">template</span> param=(object foo=<span style="color:rgb(113, 140, 0)">"bar"</span> things=(<span style="color:rgb(245, 135, 31)">array</span> <span style="color:rgb(245, 135, 31)">1</span> <span style="color:rgb(245, 135, 31)">2</span> <span style="color:rgb(245, 135, 31)">3</span>)) }} </code></pre> <p>Will result in the template’s <a href="http://t.umblr.com/redirect?z=http%3A%2F%2Fguide.meteor.com%2Fblaze.html%23data-contexts&amp;t=Y2NmMzE2YzlkNmI5M2RiOTJjODllYzNhNzE1NGM1N2FmZWI3OWI0NSx1YkZ6bTMxSw%3D%3D">data context</a> looking like this:</p> <pre><code>{ <span style="color:rgb(234, 183, 0)">param</span>:<span style="color:rgb(113, 140, 0)"> { foo: <span style="color:rgb(113, 140, 0)">"bar"</span>, things: [<span style="color:rgb(245, 135, 31)">1</span>, <span style="color:rgb(245, 135, 31)">2</span>, <span style="color:rgb(245, 135, 31)">3</span>] </span>} } </code></pre> <p>If this was useful, please <a href="http://www.pandawhisperer.net?utm_source=codementor&amp;utm_campaign=quick_tips&amp;utm_content=meteor-object-helper">check out my blog</a> for more tips.</p>
comments powered by Disqus