How do I access template variables within an {{each}} in Meteor?
For example,
<template name="test">
{{#if someValue}}It works!{{/if}}<br>
{{#each thing}}
{{#if someValue}}It works in Each!{{/if}}<br>
{{/each}}
</template>
Expected behavior is to see "It works!" and "It works in Each!". someValue is not a property of any of the objects in the thing array.
My question is how to access the template scope from within the {{each}}?
You can use .., for example:
{{#each thing}}
{{../this}}
{{../fooField}}
{{/each}}
You can also use any of those as an argument to a helper.
Related
I'm not sure if this is a Meteor issue or a generic one but I have the following code in my app.
<template name='admin'>
<div class='admin container-fluid noPadding'>
{{#if isInRole 'Admin'}}
<h3 class="homepageText">Server Statistics</h3>
{{> serverFacts}}
{{else}}
You don't belong here!
{{/if}}
</div>
When the page renders I see "You don't belong here!", then "Server Statistics" replaces it a second or so later. I have the same problem other places in my app always with a Blaze {{#if ...}} involved. Is there a way to stop the page from displaying in the browser until the rendering has completed and settled down?
This is a generic issue with reactive applications - rendering often happens while the data is still being pushed to the client. The normal solution is to use a spinner (ex: sacha:spin) until the underlying subscription(s) are ready. Then in Blaze you end up with:
<template name='admin'>
{{#if loading}}
{{> spin}}
{{else}}
<div class='admin container-fluid noPadding'>
{{#if isInRole 'Admin'}}
<h3 class="homepageText">Server Statistics</h3>
{{> serverFacts}}
{{else}}
You don't belong here!
{{/if}}
{{/if}}
</div>
You'll need a helper to compute loading based on your subscriptions. In a more complicated layout backed by several subscriptions you might end up with more than one spinner spinning at a time.
In my Stencil theme, I am including a few different size charts for products which I intend to include by just changing the path to the size chart document. I found dynamicComponent in the Stencil docs and I thought I understood the way it worked. In my higher level partial, I am binding the string to component in this way - (product.html)
<div class="container" itemscope itemtype="http://schema.org/Product">
{{> components/products/product-view schema=true sizeChart='components/products/size_charts/tshirt.html'}}
{{#if product.videos.list.length}}
{{> components/products/videos product.videos}}
{{/if}}
{{#if settings.show_product_reviews}}
{{> components/products/reviews reviews=product.reviews product=product urls=urls}}
{{/if}}
</div>
(product-view.html)
{{#if sizeChart}}
<div class="tab-content" id="tab-sizeChart">
{{dynamicComponent sizeChart}}
</div>
{{/if}}
Where all I wish to change is the variable sizeChart in future theme maintenance. When the page renders, the place where I wrote the dynamicComponent is blank.
I used if conditionals instead of dynamicComponent. It wasn't what I thought it was.
Is the example under the "Helpers" section of the Handlebars official tutorial (http://handlebarsjs.com/) erroneous? Because the snippet below does not work:
<ul>
{{#each items}}
<li>{{agree_button}}</li>
{{/each}}
</ul>
agree_button is supposed to be a helper function but there is nothing after it so I guess it is queried as a context variable, not a helper function.
Yes it's right you don't need to pass arguments to one helper, it can do repetitive code insertions that don't need any argument except the context itself.
Here is a fiddle that illustrate that it works like a charm https://jsfiddle.net/ChristopheThiry/y51b9caf/
<ul>
{{#each items}}
<li>{{agree_button}}</li>
{{/each}}
</ul>
Im trying to build a dynamic menu to create a list of pages per tag.
Is working fine except I don't know how to get the page url populated:
<section class="see-also">
{{#each tags}}
<p>In <span class="tag">{{tag}}</span>:</p>
{{#each pages}}
<li>{{data.title}}{{pages.url}}</li>
{{/each}}
{{/each}}
</section>
Any suggestions?
#luis-martins you should be able to use the relative helper with the destination from the current page being rendered and the destination from the current page in the tags.pages collection like this to generate a relative url:
<section class="see-also">
{{#each tags}}
<p>In <span class="tag">{{tag}}</span>:</p>
{{#each pages}}
<li>{{data.title}}{{relative ../../page.dest dest}}</li>
{{/each}}
{{/each}}
</section>
Notice that to the the destination of the current page being rendered, you have to use the parent syntax from handlebars: ../../page.dest. Also the dest property is on the current page item from the tags.pages collection.
Hope this helps.
I have a multiple select with a Handlebar template in Meteor.js. On first rendering, everything is fine ("Politics" and "People" are preselected as expected):
As soon as the template has to be rerendered (because a Session variable changes, e.g. Session.set("foo", "Hello World!")), the third option is not preselected anymore:
My setup:
<template name="select">
<select name="foo" multiple>
<option value="1">Tech</option>
<option value="2" selected>Politics</option>
<option value="3" selected>People</option>
</select>
</template>
<template name="test">
{{foo}}
{{> select}}
</template>
{{> test}}
Template.test.helpers(
foo: ->
Session.get("foo")
)
Do you have any idea why the options are preselected anymore after rerendering?
Solution is:
<template name="test">
{{#isolate}}
{{foo}}
{{/isolate}}
{{> select}}
</template>
Typically, the exact extent of re-rendering is not crucial, but if you
want more control, such as for performance reasons, you can use the
{{#isolate}}...{{/isolate}} helper. Data dependencies established
inside an #isolate block are localized to the block and will not in
themselves cause the parent template to be re-rendered. This block
helper essentially conveys the reactivity benefits you would get by
pulling the content out into a new sub-template.
If you put {{foo}} inside {{#isolate}} ... {{/isolate}} then parent template won't be rerendered, so also {{> select}} won't be affected.
So I am not sure why you are loosing the multiple select but I can recommend you put an {{#isolate}} tag around your{{> select}} template. That should keep the template from re-rendered. Though it will not help if your select template re-renders because its data changes. Hope that helps...