I'm trying to create a helper that renders the html for a partial block and generates a code example of that partial.
for example this:
<div class="wrapper">
{{> first}}
{{> second}}
</div>
should produce this:
html:
----------
<div class="wrapper">
<div>first</div>
<div>second</div>
</div>
----------
example:
----------
<div class="wrapper">
{{> first}}
{{> second}}
</div>
I can use a {{{{raw}}}} block helper or \{{{escape}}}}, this works for the example but not the html. Is there a way to output both without repeating my self in the code like this:
<div class="wrapper">
{{> first}}
{{> second}}
</div>
<div class="wrapper">
\{{> first}}
\{{> second}}
</div>
Is this possible?
If anyone else run into this issue it was solved here.
https://github.com/wycats/handlebars.js/issues/1385
Related
I have a row that needs to be displayed/hidden based on a variable as follows:-
{{#if ShowCamValue == true}}
<div class="row">
<div class="cell">
CAM (SF)
</div>
{{#each Properties}}
<div class="cell">
{{Property.Cam}}
</div>
{{/each}}
</div>
{{/if}}
Even though, this is true(i.e. ShowCamValue equals "true") it still doesn't display the row. Any ideas what's going on.
You just do,
{{#if ShowCamValue}}
instead of == that's not valid in handlebar.
and also check each helper syntax, you haven't defined Property. you can use this
{{#each Properties}}
<div class="cell">
{{this.Cam}}
</div>
{{/each}}
I've tried half a dozen different ways to do this but i'm not sure what the issue is.
To start, here is a quick drawing of what im trying to accomplish:
What I want:
http://prntscr.com/br8xh6
whats happening:
http://prntscr.com/br8z8p
What seems to be happening is that my .row .full-row is being rendered twice, and the dynamic template is not being loaded into my <div class="col-md-10> as defined. Why would this be?
Heres my current code:
<body>
<div class="container full-container">
{{> navbar}}
{{> middle}}
</div>
</body>
<template name="navbar">
...
</template>
<template name="middle">
<div class="row full-row">
<div class="col-md-2 left-bar" style="background:#800000;">
{{> Template.dynamic template=sidebar}}
</div>
<div class="col-md-10">
{{> Template.dynamic template=content}}
</div>
</div>
<!-- </div> -->
</template>
<template name="leftbar">
<div class="row">
<div class="col-md-12">
{{> avatar size="large" shape="circle"}}
</div>
</div>
</template>
<template name="usercard">
<div class="col-md-4">
<div class="thumbnail thumb-dark">
<img src="default.png" alt="...">
<div class="caption">
<h3>Player name</h3>
<p>...</p>
Join
</div>
</div>
</div>
</template>
<template name="home">
<div class="row">
{{#each playerslooking}}
{{> usercard}}
{{/each}}
</div>
</template>
<template name="find_page">
<div style="height:150px;width:150px;background:blue;">hello</div>
</template>
JS:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render("middle", {sidebar: 'leftbar', content: "home"});
}
});
FlowRouter.route('/find/:_id', {
name: 'postfind.show',
action: function() {
BlazeLayout.render('middle', {sidebar: 'leftbar', content: "find_page"});
}
});
I've refactored my code several times trying to debug this, as I'm not sure how BlazeLayout is suppose to work with nested templates.
All input appreciated, thanks.
Just in case, did you have a try at Blaze Layout root modification?
See: https://github.com/kadirahq/blaze-layout#set-different-root-node
tasks is from an api call. The list is showing up but no dragging is happening. The tasks are all showing up as one block div#object.sortable.target when i hover using javascript console.
<div class="col-md-4">
<div class="list-pair col-sm-12">
{{#each tasks}}
<div class="sortable target" id="object">
{{#sortable items=tasks animation="100" ghostClass="sortable-ghost" }}
<!--<div class="list-group-item"> -->
{{title}}
{{/sortable}}
</div>
<!-- </div> -->
{{else}}
<p>List is empty.</p>
{{/each}}
</div></div>
server code:
Sortable.collections = ['tasks'];
I think you should not use {{#each}} when you use {{#sortable}}
Is there a way to call a template on other template, but excluding it from the CSS selectors and all?
This does not work, the {{> map_template}} looks weird:
<template name="main">
<div class="containerMain">
<div id="bl-main" class="bl-main">
<section>
<div class="bl-box">
<img src="images/logo.png">
</div>
<div class="bl-content">
<h2>Pa' Donde Menu</h2>
{{#each mostrarEvento}}
{{> Evento}}
{{/each}}
{{> map_template}}
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
</div>
</div>
</template>
This works:
<template name="main">
{{> map_template}}
<div class="containerMain">
<div id="bl-main" class="bl-main">
<section>
<div class="bl-box">
<img src="images/logo.png">
</div>
<div class="bl-content">
<h2>Pa' Donde Menu</h2>
{{#each mostrarEvento}}
{{> Evento}}
{{/each}}
</div>
<span class="bl-icon bl-icon-close"></span>
</section>
</div>
</div>
</template>
So is there a way to use {{> map_Template}} inside the <div class="containerMain">, but without applying the CSS and all that stuff?
I'm not a web whiz, but off the top of my head, you need to create a new template for the {{> map_template}}. Make sure to name the class inside map_template and then create a css template inside your style.css or wherever you are getting your CSS from.
Your CSS should end up something like:
.map-template{
//style stuff
}
Where {map-template} matches your class name.
I used this question to try to piece together a solution: How to prevent child element from inheriting CSS styles
Sorry if that isn't quite what you are looking for.
Is it possible to dynamically set the text color of a input field based on a handlebars.js template value?
I am initially creating my html using this template:
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
{{> project}}
{{/each}}
</div>
Where projects is an object read from a db. The resulting html (what gets rendered on the page not what is in my html) for each project looks something like this:
<div class="project">
<span class="name">FOO</span>
<span class="status">OK</span>
</div>
<div class="project">
<span class="name">BAR</span>
<span class="status">NOTOK</span>
</div>
I would like to render this html with the colour of the OK & NOTOK text set dynamically.
I already have a handlebars helper function that will successfully return the correct colour code based on each option and I can call this using:
{{getStatusColor currentStatus}}
What I would like to do is put this function call directly into the css itself, a bit like:
font-color: {{getStatusColor currentStatus}}
But obviously this doesn't work. This function does feel like the right approach though but where can I use it to format the text correctly on the page?
Answering my own question: The template needed to be expanded (from {{> projects}}) to allow for conditional rendering.
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
<div class="project">
<span class="name">{{name}}</span>
<span class="status" style="color:{{getStatusColor status}}">{{status}}</span>
</div>
{{/each}}
</div>
For completeness, the helper function getStatusColor looks like this:
Handlebars.registerHelper('getStatusColor', function(status) {
switch (status) {
case "GOOD" : {
return 'green';
}
break;
case "BAD" : {
return 'red';
}
break;
default : {
...etc.;
}
});
UPDATE:
In the interests of honesty, I should confess I totally missed that I already had this expanded template in my code and that {{> projects}} was pointing to this. I should have just added the style="color:{{getStatusColor status}}" attribute directly into the referenced project template. So, as much for my benefit as others, the final, working, HTML:
<template name="foo">
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
{{> project}}
{{/each}}
</div>
</template>
<template name="project">
<div class="project {{selected}}">
<span class="name">{{name}}</span>
<span class="status"style="color:{{getStatusColor status}}">{{status}}</span>
</div>
</template>