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>
Related
Let's say we have the following HTML template:
<template id="my_template">
<div>
<h4>Test Titel</h4>
<div class="row">
<label for="someinput">Stichwort:</label>
<input id="someinput" type="text"/>
</div>
</div>
</template>
Now I like to render a list with multiple items based on that template.
I know that we can just clone the template and use selectors on it as on a regular DOM.
But is there also an alternative way to clone, etc... but with data, so that we can set the content without using selectors, but variables?
Something like the following, we just declare the variable ID before adding the template?
<template id="my_template">
<div>
<h4>Test Titel</h4>
<div class="row">
<label for="someinput_${ID}">Stichwort:</label>
<input id="someinput_${ID}" type="text"/>
</div>
</div>
</template>
I know it is possible with template literals, but I am just curious if this also works in any way with theses handy template tags?
Is it at all possible to set data in a temple tag without using selectors on it?
Is it at all possible to set data in a temple tag without using sectors on it ?
No, not in the way you mean. (The literal answer to the question quoted above is "yes" but only because you can modify the DOM without using selectors, per se — by doing the DOM traversal yourself. Not a useful "yes." 🙂 )
HTML template tags don't have an "evaluate with these variables" method or similar. As you've said in the question, you could always write a function that uses a JavaScript template literal to build the HTML instead (and then use insertAdjacentHTML() or innerHTML to add it to the DOM).
I am working with some Angular and firebase code in which I am requesting some data from firebase and displaying them, simple stuff, but...
I had an array of string which contains some data like so,
[
"Refraction"
"折光"
]
the second one is HTML symbols and when I tried to render it to screen using angular interpolation
this happened
<p _ngcontent-rnr-c24>折光</p>
and when I manually hard code this to HTML file this is what I get
<p _ngcontent-rnr-c24>折光</p>
which is what I wanted...
Any help is appreciated, thank you
Since it's an HTML Symbol you might just be better off doing it like this:
<ng-container *ngFor="let symbols of symbols">
<p [innerHTML]="symbol"></p>
</ng-container>
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.
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
I'm using mustache to render portion of html. To do this , I'm using this javascript :
var template = $("#div_name").html();
..
..
$("#container").append(Mustace.render(template,some_object));
As the <div id="div_name"></div> still remain inside the html , I use it only to get a template i was wondering : is it convenient to keep templated div html be inside the html or is better to load it e.g. with partials through ajax ?
Thanks in advance.
You can also keep templates inside script elements like so:
<script type="application/mustache" id="div_name">
//Mustache template code here
</script>
And fetch the template code from there using $("#div_name").html(). It won't be shown on the page and the script tag is not executed because of the invalid type.