{{#each}} makes handlebars template disappear - javascript

I have a template inside a script tag
<div class = "exhibitionDescription">
<h3>{{title}}</h3>
<p>{{infoText}}</p> </div>
and the browser renders it fine,
but when I surround it with {{#each arrayName}} {{/each}}
{{#each arrayName}}
<div class = "exhibitionDescription">
<h3>{{title}}</h3>
<p>{{infoText}}</p> </div>
{{/each}}
browser renders the script tag absolutely blank.
The handlebars library is included before the script tag
(here is a screenshot of the final browser output)
Here is the same code, but without the {{#each}} {{/each}} around the template
UPD! Turns out {{#each}} tag "cuts" everything it surrounds, including itself, which is not something is that supposed to happen...
UPD 2! I think i've got the problem - double curly brackets ({{ }}) just make the code in between disappear! Why tho?

I solved it - I was using handlebars to insert the templates themselves, that's why my curly braces were interpreted by handlebars as data inputs, and it just removed them when rendering!
Instead of
{{text}}
, I should have used the
\{{text}}
, which fixes the problem and makes it leave the curly braces alone.

Related

Emoticons displayed as raw HTML code

I am using the mattimo:emoticons package in Meteor (https://atmospherejs.com/mattimo/emoticons) to display emoticons. I am using this simple template to test it:
<template name="test">
{{parseEmoticons ":-)"}}
</template>
which is displayed through the route "/test" like so:
Router.route('/test/', function () {
this.render("test");
});
This should display a simple smiley, but instead I get the raw HTML in the browser:
<img class="meteoremoticon" src="/packages/mattimo_emoticons/assets/images/emoticons/caritas_07.png">
How do I get the browser to render the HTML instead of just displaying the unprocessed HTML?
From Meteor documentation:
{{{content}}} - Triple-braced template tags are used to insert raw HTML. Be careful with these! It's your job to make sure the HTML is safe, either by generating it yourself or sanitizing it if it came from a user input.
So, try to use triple braces
<template name="test">
{{{ parseEmoticons ":-)" }}}
</template>

Django, html tags not interpreted

I am loading a text from the DB of a django project to display it in the template.
In the text stored within the data base, I added some HTML tags but it seems like the browser cannot interprete this html tags.
Here is my template:
<div>
<!-- body_text = "<strong>Hello</strong> word" -->
{{ entry.body_text }}
</div>
And I got the raw text: <strong>Hello</strong> word instead of
<strong>Hello</strong> word
What I am doing wrong?
If you don't want your HTML to be escaped, use safe filter:
{{ entry.body_text|safe }}
django doc about safe filter.
You can also try this:
{% autoescape off %}
{{ your_html_content }}
{% endautoescape %}
From django docs for autoescape:
Controls the current auto-escaping behavior. This tag takes either
on or off as an argument and that determines whether auto-escaping is in effect inside the block. The block is closed with
an endautoescape ending tag.
When auto-escaping is in effect, all variable content has HTML
escaping applied to it before placing the result into the output (but
after any filters have been applied). This is equivalent to manually
applying the escape filter to each variable.
As pointed out in the other answer, you can also use safe filter which:
Marks a string as not requiring further HTML escaping prior to output.
When autoescaping is off, this filter has no effect.
See here: safe filter.
Read more about django template tags and filters: Django Built-in template tags and filters

What does {{^ mean in handlebars

I have a handlebars template that contains:
{{^is mymodel.someproperty}}
I don't understand what the significance of the caret symbol is. I've searched around, the only place I'm seeing it is on Handlebars Expressions
It's used like so:
{{#each nav}}
<a href="{{url}}">
{{#if test}}
{{title}}
{{^}}
Empty
{{/if}}
</a>
{{~/each}}
What does "{{^" mean in handlebars? It sort of looks like a .NOT. or .ELSE. or something like that.
-Eric
The reason it's not in the handlebars doc is because it's a mustache construct called an Inverted Section.
See: https://mustache.github.io/mustache.5.html#Inverted-Sections
{{#repo}}
<b>{{name}}</b>
{{/repo}}
{{^repo}}
No repos :(
{{/repo}}
... disabling inverse operations such as {{^foo}}{{/foo}} unless fields are explicitly included in the source object._
http://handlebarsjs.com/reference.html
http://handlebarsjs.com/expressions.html

Handlebars, avoid compiling (ignore) part of a template?

Is there a way to tell the Handlebar compiler to ignore a block of template.
I know there is the \ solution, like :
\{{ is.ignored}}
but is there something that would do the same, but for a complete block, like :
<script type="text/x-handlebars-template" id="my-template">
<ul>
{{#each items}}
<li>{{display}}</li>
{{/each}}
</ul>
</script>
I believe it would be better (and far more readable) to have something like {{#ignore}}{{/ignore}} instead of adding \ everywhere.
I tried to find something using block helpers, either building something myself, but I can't get my hand on the non-compiled version of what's inside the block.
Unfortunately, Cyril's answer seems out of date? I found this alternative in the Handlebars documentation on raw blocks:
Raw Blocks
Raw blocks are available for templates needing to handle unprocessed mustache blocks.
{{{{raw-helper}}}}
{{bar}}
{{{{/raw-helper}}}}
will execute the helper raw-helper without interpreting the content.
Handlebars.registerHelper('raw-helper', function(options) {
return options.fn();
});
will render
{{bar}}
Yes I finally found it, it's called ... raw ! :
{% raw %}
<script type="text/x-handlebars-template" id="my-template">
<ul>
{{#each items}}
<li>{{display}}</li>
{{/each}}
</ul>
</script>
{% endraw %}
Update : After an update of Handlebars, this snipped seems to not work now. I opened a ticket to see how to make it works.

How do templates work in Meteor

I've been working through the Discover meteor book, currently at chapter 6. I'm having great difficulty in understanding the relationship between templates, and how they work.
For example, I have a template called posts_lists.html and a javascript file called posts_lists.js
Within posts_lists.js I have the following:
Template.postsList.helpers({
posts: postsData
});
And within posts_lists.html I have:
<template name="postsList">
<div class="posts">
{{#each posts}}
{{> postItem}}
{{/each}}
</div>
</template>
So, am I right in thinking that Template.postsList.helpers({ is a block that contains all the variables accessed by the postsList template. The bock returns postsData in the form of posts.
posts is looped over - calling the postItem template. This is where I get lost... as I don't have a postItem.js file, or postItem.html file
I do have post_item.html and post_item.js - but these aren't named the same as postItem...
....but it works???? I don't get it. I know its not magic... but cant figure it out. In terms of my level / skillset I'm a designer / jquery user trying to learn more.
Thanks,
Rob
The file names have little significance. It's just a convention.
Your post_item.html should contain a template named postItem.

Categories

Resources