Handlebar template
<div>
{{contentText}}
</div>
JS
var contentText = {contentText: "<table><tr><td>Some Data<\/td><\/tr><\/table>"}
Handle bars render displays the HTML as string rather than rendering the HTML.
Where am I going wrong ?
From the fine manual:
Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash", {{{.
So if you want to put contentText straight into the template as-is then you want:
<div>
{{{contentText}}}
</div>
in your template.
Demo: http://jsfiddle.net/ambiguous/f7LJ5/
Related
Is there a way without going to JavaScript that Spacebars can pass a variable to a modal?
For example, when I try:
<button type="button" id="genbtn" data-toggle="modal" data-target="#entryModal">Pass</button>
{{> newentry var=item}}
It does not work inside the modal:
<template name="newentry">
{{#with var}}It displays here!{{/with}}
<div id="entryModal" class="modal fade" role="dialog">
{{#with var}}Does not display here!{{/with}}
(Rest of modal works just fine)
I can't figure out why the variable can get into the template, but not past the modal. Otherwise the modal's non-var related functions work just fine. Why does this interrupt? Can it be overcome? If so, how?
Note: If this cannot work without going to the JavaScript, I can do it, but it feels like the wrong solution to this problem.
I had the slimier Issue recently so I just share my working example. I am using the below code and it's work perfectly.
{{>userInfo userId=customer._id userType='Customer'}}
then in userInfo template i got the userType as:
<div class="panel panel-{{currentColor ../userType}} user-info">
Please note the ../ before userType. and I am also using userId in js as:
Template.currentData().userId
so that can be used in any way like am doing as a helper
relatedUser: function(){
return Meteor.users.findOne({_id: Template.currentData().userId})
}
hope my examples can help :)
Update
make a helper in newentry Template as :
myReactiveHelper: function(){
return Template.currentData().var
}
and then in your template bind that helper instead of var as :
{{#with myReactiveHelper}}Does not display here!{{/with}}
I think it would be better and simple to use Jquery lightbox_me plugin which wrap your modal into meteor templates.
For example.
$body = $('body')
UI.render Template.release_info, $body[0] //rendering template
$popup = $body.find("#releases-info-popup-container") // modal Id
$popup.lightbox_me
centered: true
destroyOnClose: true
Template
<Template name="release_info">
<div id="releases-info-popup-container">
</div>
</Template>
Is it possible to render a template, or even just a partial, from within the context passed to a top level template? It seems like this might require recursive rendering, but maybe I'm missing something.
The example below demonstrates this using Bootstrap.
Say this is my top level template:
<div class="panel">
<div class="panel-body">
{{{description}}}
</div>
</div>
And my context is:
{
description: "\
Some text before the warning.\
<div class=\"alert alert-warning\" role=\"alert\">\
<span class=\"glyphicon glyphicon-warning-sign\" aria-hidden=\"true\"> </span>\
My warning here.\
</div>\
Some text after the warning."
}
What I'd like to do is separate the alert into a partial for a number of reasons:
Arbitrary placement within surrounding text
Can make partials for types other than warning (danger, info, etc.)
Can add as many as needed interspersed in the context string
For these reasons, it seems like it's not possible to put it into the top level template.
The partial would look something like this:
<script id="partial-warning-template" type="text/x-handlebars-template">
<div class="alert alert-warning" role="alert">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"> </span>
{{{warning-message}}}
</div>
</script>
Once this is in place, I would be able to use it like so:
{
description: "\
Some text before the warning.\
{{> partial-warning-template \"My warning here.\"}}\
Some text after the warning.\
{{> partial-warning-template \"Now adding a second warning.\"}}"
}
Maybe I'm missing something fundamental - is there a more idiomatic way of doing this?
You won't be able to include the partial blocks in the description value and expect them to be evaluated as partials by the top level template method; the entire description string will be spat out as a single literal string.
What you would need to do is to have the partials evaluated before you pass the context object with description to the top level template method.
If you have pre-compiled your partial in something like the following manner:
Handlebars.registerPartial('warn', Handlebars.compile(document.getElementById('partial-warning-template').innerHTML));
Then you will be able to call this partial when you construct your description string:
{
description: 'Some text before the warning.' +
Handlebars.partials.warn({ 'warning-message': 'My warning here.' }) +
'Some text after the warning.' +
Handlebars.partials.warn({ 'warning-message': 'Now adding a second warning.' })
}
I have an array of links that I need to render into hrefs in the html. Here is what I have, I am itterating through the array with {{#each shipUrl}}:
shipUrl:{["http:urlone.com","http:urltwo.com"]}
Now if I use this:
<div>{{shipUrl}}</div>
It will evaluate to this on the page
[http:urlone.com]
[http:urltwo.com]
But if I put it in an href
<div href="{{shipUrl}}">Click</div>
This renders to [http:urlone.com] ...
What is the correct way to get the index of this object into an href?
The answer was to use {{this}}
In HTML
<div href="{{this}}">Click</div>
I'm trying to get the following behavior for a certain template:
<body onload="someInitFunction();">
Let's say i have the following markup (i'm using mrt router, not iron-router, for {{renderPage}}):
// Main Template
<head>
<title>meteorite-knowviz</title>
</head>
<body>
{{> header}}
<div class="container-fluid">
<div class="row">
{{renderPage}}
</div>
</div>
{{> footer}}
</body>
That renderPage is the secondTemplate:
<template name="secondTemplate">
{{#if currentUser}}
<div class="col-md-2">
<div class="list-group">
<a class="list-group-item" href="{{render thirdTemplate please...}}">Third Template</a>
<a class="list-group-item" href="{{render fourthTemplate please...}}">Fourth Template</a>
</div>
</div>
// In this case let's say thirdTemplate gets rendered
{{render the choice taken above please...}}
{{/if}}
</template>
And within this template, depending on which link was clicked on, (in this case the third) there will finally be a thirdTemplate, which will show a data visualization with some help by a javascript framework, which will be in need of a <body onload="initFunction();">in order to display the data:
<template name="thirdTemplate">
<div class="col-md-5">
<h2>THIS!! section needs a "<body onload="initFunction();"> in order to work" ></h2>
</div>
<div class="col-sm-5">
<h2>Some other related content here</h2>
</div>
</template>
To sum up i have three questions:
1a. How could i get the third template to get a <body onload="initFunction();">
2a. In which way can i render different templates within the secondTemplate?
2b. Can i use a {{renderPage}} within this template even though this template is the renderedPage in the main template or should i do it in some other way?
In order to get the <body onload="initFunction();"> i had to do the following:
First add the following function to a .js file in the client folder:
Template.thirdTemplate.rendered = function() { // Template.thirdTemplate.created - also worked.
$('body').attr({
onload: 'init();'
});
}
This however got me an error saying that initFunction is not defined. In an standard html page my could work just fine, but in meteor i had to change my function from:
function initFunction(){
//what ever i wished to do
}
To:
init = function() {
//what ever i wished to do
}
Regarding the rendering of pages, iron-routing is the way to go since the router add on is not under development any more.
1a. How could i get the third template to get a <body
onload="initFunction();">
You probably want to call initFunction when the third template has been rendered, so just put your call to it in the rendered callback.
Template['thirsTemplate'].rendered = function(){
initFunction()
}
2a. In which way can i render different templates within the
secondTemplate?
2b. Can i use a {{renderPage}} within this template even though this
template is the renderedPage in the main template or should i do it in
some other way?
Listen for clicks on the links, and when one happen you manually render the desired template (possible with Meteor.render, if you need reactivity) and add it to the right node in the document. See this question.
It may be possibly to achieve with router (I don't know that package).
I think that what you want to use is the created callback, that will be called each time your template is created, and not the rendered callback, that would be called each time a change has caused the template to re-render.
Template.thirdTemplate.created = function(){
initFunction()
}
See the documentation for templates for other types of callbacks: http://docs.meteor.com/#templates_api
I am collecting the values from text area of a form and inserted them into a collection. But when i tried to display them in another template from the db, the styles are not getting applied.
Suppose if i have inserted Android Programmer in the database it is displaying 'Android Programmer' with the bold tags when i retrieved.
I am using bootstrap3-wysihtml5 richtext editor in my form.
What is the solution to avoid this problem.?My sample code here...
Jobs = new Meteor.Collection('jobs');
Template.postSubmit.events({
'click .formsubmit': function(event){
if(Meteor.user())
{
jobdescription = $('#jobDescription').val();
Jobs.insert({
J_Description:jobdescription;
});
}
});
<template name="jobPage">
<div class="jobDetailBody">
<p class="desc">{{J_Description}}</p>
</div>
</template>
When displaying the text from db i made use of handlebars. So the solution in this case is
<template name="jobPage">
<div class="jobDetailBody">
<p class="desc">{{{J_Description}}}</p>
</div>
</template>
Just add three curly braces to the handle bars for which you want to escape html.