I do not know if this is specific to the requirejs handlebar plugin but when I have a template like :
<h1>abc</h1>
{{#if testcondition1}}
<h1>def</h1>
{{/if}}
{{#if testcondition2}}
<h1>ghi</h1>
{{/if}}
<h1>xyz</h1>
I get a empty line if one condition is false.
so like:
<h1>abc</h1>
<h1>ghi</h1>
<h1>xyz</h1>
and not
<h1>abc</h1>
<h1>ghi</h1>
<h1>xyz</h1>
Is this the expected behavior?
I'd like to get no lines without recurring to string manipulation after the template compilation. I know that lines get ignored in html but this can be really annoying especially in loops.
If you look at the newline placements in your code:
<h1>abc</h1>\n
{{#if testcondition1}}\n
<h1>def</h1>\n
{{/if}}\n
{{#if testcondition2}}\n
<h1>ghi</h1>\n
{{/if}}\n
<h1>xyz</h1>\n
You can see that if the first condition is false, the code without the skipped branch is:
<h1>abc</h1>\n
\n
{{#if testcondition2}}\n
<h1>ghi</h1>\n
{{/if}}\n
<h1>xyz</h1>\n
which gives you two newlines in a row.
Related
I'm iterating through an array, but I want to change the div color according to whether the index is odd or even.
Handlebars is not recognizing {{#index}} within an if statement, such as this:
{{#each org as |building i|}}
{{#if (isEven {{#index}})}}
...
{{/if}}
{{/each}}
the isEven is a helper I created to check. It works well, but I can't seem to pass the index to it.
Please keep in mind that I'm using Express Handlebars.
Try it without the brackets around #index
{{#if (isEven #index)}}
...
{{/if}}
This is a branch off from this question: Handlebars.JS (w/ Dashbars) parse error "expecting open_endblock got inverse" (There's also a codepen therein.) I posted this there because I thought the problems were related, maybe (since {{else}} can be used with if's or each's,) but that turned out not to be the case.
Specifically:
I'm also having the problem of my outermost {{#each}} looping in such a way that only the last record returned is being output through the template. Everything logs in {{log this}} after that opening {{#each}}, but it's not even hiding in the HTML output somewhere.
So my table SHOULD have 4 rows, and objects 0 through 3 log to the console, but only the fourth item, item 3, is added to the table. Inner each's work as expected, as do any and all other iterator functions; I'm not sure why it's JUST the outer one that's failing. The JSON from which my array of objects is created validates in every single linter I've used, as does my JavaScript. Atom is supposed to have a handlebars linter, but it doesn't seem to actually...umm...work.
I AM using Dashbars with this, (with both its lodash.js and moment.js dependencies,) but this bug has existed since before I started using that library. FWIW, jQuery 2.1.3 IS installed, and loaded before any other library, and all of that is in the <head> tag. (I don't see where it would matter, but just in case.) And since JavaScript is involved, yes, I'm in Chrome. The version of Handlebars is the latest, 3.0.1, using the full version because my use-case doesn't allow pre-compiling. Another NB is that all of this is embedded in a .cfm file (not my choice,) so everything does get run through the CFML interpreter first.
So...I'd managed to outsmart myself again. I've created a fork of my original code, but HTTPS policy in my browser is keeping it from working =-\
The "money" differences are as follows (can't use SO's <ul> because I can't embed code in a bullet-block)
*I'd been trying to jam my template into a <tr> element, to avoid having Handlebars process more lines of code than I thought was necessary:
<tr class="searchResults" id="searchResultsHTML"></tr>
<script id="result-template" type="text/x-handlebars-template">
<!--- To accommodate for that this would all begin and end with a <tr>, I tried this: --->
{{#unless #first}}
<tr>
{{/unless}}
<!--- The rest of the template --->
{{#unless #last}}
</tr>
{{/unless}}
</script>
*In good-programmer fashion, I'd forked my actual file several times, trying different things. (Mostly did this to avoid endless git resetting and branching; I know git's meant for this sort of thing, but I just wanted to be able to refresh old and new tabs at once. Anyway!) Took out those {{unless}} blocks and...apparently, I'd misunderstood what that does (since the official documentation is a bit...scant...on that point. There's no TRUE inverse of {{#if}}) For the sake of those who don't want to bother clicking to the codepen:
<div class="searchResults" id="searchResultsHTML">
<script id="result-template" type="text/x-handlebars-template">
<table id="resultTable">
<tr>
<th>Personal Information</th>
<th>Education</th>
</tr>
<!--- The log tag DOES output all records, even the ones that aren't showing in the HTML. --->
{{#each this}} {{log #index}} {{log this}}
<tr>
<td>{{#with basicInformation}}
<p>{{MASTER_CUSTOMER_ID}} ({{CUSTOMER_STATUS_CODE}})<br />
{{SEARCH_NAME}}<br />
(<span class="lightBlue">ADD:{{ADDOPER}}–{{{d-format 'MM/DD/YYYY' (d-date 'YYYY-MM-DD' ADDDATE)}}}</span>)</p>
<p>DOB:{{{d-format 'MM/DD/YYYY' (d-date 'YYYY-MM-DD' BIRTH_DATE)}}}<br />
{{/with}}</td>
<!--- More table columns; six total --->
<td>{{#each education}}
<p>{{INSTITUTION_NAME}} ({{{d-format 'YYYY' (d-date 'YYYY-MM-DD' BEGIN_DATE)}}}–{{{d-format 'YYYY' (d-date 'YYYY-MM-DD' END_DATE)}}})</p>
{{else}}
<p>No education records found</p>
{{/each}}
</td>
</tr>
{{else}}
<tr class="alert largerError" id="errorMessageRow">
<td class="empty" id="errorMessage" colspan="6">Either there has been an error, or your search did not return any records from any datasource.</td>
</tr>
{{/each}}
</table>
</script>
Yes, I stuck with ColdFusion comments; since those are ONLY for my reference, or the poor next developer, they don't need to go to the client and that way Handlebars isn't taking valuable time rendering them. (I'm already annoyed Handlebars is going to have to churn through my header row and a bunch of other text.) This tool searches our databases for customer numbers that MIGHT represent accidental duplicate accounts, so if you search for John Smith...oi!
So for anyone who Googled their way over here...I'll be glad if this helps even one person avoid spinning their wheels the way I did.
I'm wondering if it is possible to nest multiple if/else statements using handlebars? All my attempts so far have resulted in compile errors, what I'd like to do is as follows:
{{if address}}
<ul>
<li>address.line1</li>
<li>address.line2</li>
{{if address.line3}}<li>address.line3</li>{{/if}}
{{if address.line4}}<li>address.line4</li>{{/if}}
{{else}}
No address given
{{/if}}
Is what I'm attempting here achievable? It always results in parser errors, thusfar I've got around it by writing a helper to deal with spitting out the address (which deals with conditionality of line3/line4 in javascript):
{{if address}}
{{formatAddress address}}
{{else}}
No address given
{{/if}}
While this works, it would be nice not to have to write a helper function for every instance of this sort of simple conditionality.
I believe ifs need a preceding #
Try this.
{{#if address}}
<ul>
<li>address.line1</li>
<li>address.line2</li>
{{#if address.line3}}<li>address.line3</li>{{/if}}
{{#if address.line4}}<li>address.line4</li>{{/if}}
</ul>
{{else}}
No address given
{{/if}}
I am using Handlebar.js as my templating engine. Now I want to comment out some of the blocks in my handlebar templates. But then I realized that Handlebar doesn't ignore the expressions inside the Handlebar comment block. Any workaround for this?
The newest version of Handlebars has block comments support :
{{!-- {{commented expressions}} --}}
https://github.com/wycats/handlebars.js/commit/a927a9b0adc39660f0794b9b210c9db2f7ddecd9
Just add an exclamation mark after the opening brackets.
Normal Expression:
{{expressions}}
Commented Expression:
{{!expressions}}
Use this way in your handlebar template file.
<div class="entry">
{{!-- only output author name if an author exists --}}
{{#if author}}
<h1>{{author.firstName}} {{author.lastName}}</h1>
{{/if}}
</div>
The comments will not be in the resulting output. If you'd like the comments to show up, then use HTML comments.
<div class="entry">
{{! This comment will not be in the output }}
<!-- This comment will be in the output -->
</div>
refer this link to
Two ways to comment on handlebar.js
single component:
{{!fixedTop=true}} --> comments the whole content inside the brackets
Multiple component:
{{!--fixedTop=true
alignment=true--}} --> comments the whole content until end with "--"
offical site said
"You can use comments in your handlebars code just as you would in your code. Since there is generally some level of logic, this is a good practice.
The comments will not be in the resulting output. If you'd like the comments to show up just use HTML comments, and they will be output.
Any comments that must contain }} or other handlebars tokens should use the {{!-- --}} syntax."
Check the site https://handlebarsjs.com/guide/#evaluation-context
Use this code:
{{#data}}
<!-- enter comments here -->
<p>{{name}}</p>
{{/data}}
here is what I'm trying to do:
I want to create a tree widget in emberjs that will look like:
{{view UI.TreeView content="App.rootNode"}}
{{name}} //-> content of each node, it could be <img src="{{icon}}" /> {{name}}
{{/view}}
The problem I'm facing is how to use the inner template in my itemViewClass.
Here is what I came up with so far: http://jsfiddle.net/YJ7zM/13/
Relevant line:
template: Em.Handlebars.compile("{{name}} {{view UI.TreeChildrenView contentBinding=\"children\"}}")
That's the line I don't like and would like to replace with something more like:
templateBinding: "parentView.template"
The problem is that "parentView" will only work for the first level of the tree, for the other ones it would be "parentView.parentView.template" and so go.
You could always define the template externally and use templateName...
http://jsfiddle.net/YJ7zM/14/
edit
Revised to address first comment. http://jsfiddle.net/ud3323/mgCva/