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}}
Related
I'm following this Ember tutorial and I've suddenly run into an issue where my rental-listing.hbs template component stops rendering. It started when I began implementing the map service.
I don't understand where this could be happening. I've copied the code from parts of the GitHub repository that I thought were relevant but to no avail.
I have a rental.hbs template that looks like so:
<div class="jumbo">
<div class="right tomster"></div>
<h2>Welcome!</h2>
<p>We hope you find exactly what you're looking for in a place to stay.</p>
{{#link-to "about" class="button"}}
About Us
{{/link-to}}
</div>
{{outlet}}
Which in turn has a template component called rental-listing.hbs:
<article class="listing">
<a
onclick={{action "toggleImageSize"}}
class="image {{if this.isWide "wide"}}"
role="button"
>
<img src={{this.rental.image}} alt="">
<small>View Larger</small>
</a>
<div class="details">
<h3>{{link-to this.rental.title "rentals.show" this.rental class=this.rental.id}}</h3>
<div class="detail owner">
<span>Owner:</span> {{this.rental.owner}}
</div>
<div class="detail type">
<span>Type:</span> {{rental-property-type this.rental.category}} - {{this.rental.category}}
</div>
<div class="detail location">
<span>Location:</span> {{this.rental.city}}
</div>
<div class="detail bedrooms">
<span>Number of bedrooms:</span> {{this.rental.bedrooms}}
</div>
</div>
<LocationMap #location={{this.rental.city}}/>
</article>
The only thing I have added to the above is the line <LocationMap #location={{this.rental.city}}/> but it still doesn't work if I remove it.
The console shows me no errors and I can actually see I am getting the three dummy objects I want from Mirage:
So I'm definitely getting the objects and from what I see I'm doing everything necessary in the templates to render it but they aren't. Should I be looking somewhere else?
Are you able to provide a link to your example? By having each piece of the ember application you mention it would be best to answer definitely. I can give a general answer with strategies for debugging the template.
The conventions behind ember.js make understanding the "whys" frustrating at first and possibly opaque. Ember's handlebars implementation governs how values are populated and accessed within templates using very specific rules. Ember treats templates (handlebars files) differently depending on whether it is for a route or component. Component's have an isolated context and must receive values by explicit passing in or dependency injection. Then, you can use such values in a component's template by accessing those properties with {{this.somePassedInValue}}.
In the super-rentals app, it appears the rental index route invokes the components responsible for displaying the individual units. I found this in app/templates/rentals/index.hbs.
<li><RentalListing #rental={{rentalUnit}} /></li>
The route template iterates over the list of filteredResults. Each of these is the rentalUnit. A good first step would be to use the {{log}} helper to print out that the value of rentalUnit to ensure it is what you expect.
Alternatively, you could try cloning https://github.com/ember-learn/super-rentals and applying the changes you want to make step by step from the master branch. By doing so, you could easily undo a single change to see what caused something to not show up as expected.
<LocationMap #location={{this.rental.city}}/>
to be written as below
<LocationMap #location={{this.rentals.city}}/>
may be typo error.
also repeat this for there place in that template.
Because the model name in the console is rentals not rental
I realise that this has been brought up before, and that Template.dynamic isn't designed to take in a parameter if its template parameter is a helper.
But here is what I would like to do:
// a global helper that composites the template's name using domain-specific and global parameters
Template.registerHelper('templateName', function (name) {
return name + Session.get('someVariable');
});
<!-- use case: a template calling two dynamic ones -->
<template name="someTemplate">
<div class="some-class">
{{> Template.dynamic template=templateName 'title' }}
</div>
<div class="another-class">
{{> Template.dynamic template=templateName 'content' }}
</div>
</template>
This pattern is extremely DRY and it avoids having to set up nested conditionals and rewrite quasi-identical templates each with minimal changes.
Right now, I've got this:
Template.registerHelper('templateName', function () {
var dt = this.dName || Template.parentData().dName;
return dName + Session.get('someVariable'));
});
<template name="someTemplate">
{{> segment dName="title"}}
{{> segment dName="content"}}
</template>
<template name="segment">
<div class="some-class">
{{> Template.dynamic template=templateName }}
</div>
</template>
It works, but it isn't ideal, because;
confusion-prone need to include the parameter for the dynamic template's name in the parent template's call
only ever being allowed one Template.dynamic per template due to one parameter, leading to scalability issues
putting the dName parameter in the template's data context is mixed in with local data, requiring the hacky check whether it's accessible in the current one or the parent's
any further complexity in the DOM requires lots of nested conditionals for parameters or many slightly different static templates, leading to bloat
Are there plans to add this functionality? Am I going about this the wrong way? Did anyone else run into these issues?
Thanks for reading.
There is a trick to doing this with {{with}}. See here:
https://forums.meteor.com/t/pass-argument-to-helper-in-template-dynamic-call/3971
I'm trying to make a addstudent template which can be rendered with data if clicked on editstudent option from another template.
I don't want to make different templates for addStudentDetails and EditstudentDetails. how to create a single template for this both functions.
can anyone help me with this?
I see a couple ways of doing this.
Handlebar template, using conditionals.
Then in your controller you can control whether you want to edit or add.
The ember guide has a good example of this for controlling state.
Or you can use Routes and Resources. Possibly a Parent Resource called Student and then routes called edit and add. But you said you didn't want to use different templates so I'm assuming you'll probably want to use #1.
//inside your controller
App.StudentController = Ember.ObjectController.extend({
editStudent: true // or false
});
<!-- handlebars template possibly called studentTemplate -->
{{#if editStudent}}
<!-- code for editStudent -->
{{else}}
<!-- code for addStudent -->
{{/if}}
Hope that answers your question.
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.
Is there a way to dynamically inject partial templates (and have it work the same way in both Ruby & Javascript)? Basically, I'm trying to render different types of objects in a list.
The best I can come up with is this:
<div class="items">
{{#items}}
<div class="item">
{{#is_message}}
{{> message}}
{{/is_message}}
{{#is_picture}}
{{> picture}}
{{/is_picture}}
</div>
{{/items}}
</div>
I'm not super-psyched about this approach.
Is there a better way?
Also note that the different types of models for the views can have non-similar fields. I suppose I could always go to the lowest common denominator and have the data hash contain the html, however I would rather use the mustache templates.
I did the same thing you did, and for each property type i needed a dynamic partial, I just set a dynamic variable in the js data model that's being rendered in the template...
eval("this.set({is_" + this.get("propertyType") + ": true})")
or
this["is_" + propertyType] = true
At least I don't have to manually set the 'is_whatever' variable...
It would be cool if mustache.js or ICanHaz.js had some clever syntax for dynamic properties inside of mustache tags... maybe something like this:
{{>{{message}} }}