I have codeigniter project with handlebars.js
and I have page (page.template.html) through codeigniter api I pass lang variables
inside the page when loop with handlebars with an array I can't use the lang var because it will get form the array
is there anything to escape getting from the array .. OR any other solutions?
in the code below .. the array is (orgLang) and (this) is the element
the array looks like:
orgLang = ['ar' ,'en']
and the lang var is (details.slug)
{{#each orgLang}}
<a class="dropdown-item lang-picker-item" href="{{details.slug}}/{{this}}">
<img width="25px" src="assets/images/flags/{{this}}.jpg" >
</a>
{{/each}}
I found this solution and it's worked
add ../ before the variable
because it's in another scope
{{#each orgLang}}
<a class="dropdown-item lang-picker-item" href="{{../details.slug}}/{{this}}">
<img width="25px" src="assets/images/flags/{{this}}.jpg" >
</a>
{{/each}}
Related
I get an error 400 from the images server provider because the request include slash in the end of the image url
<div class="footer accordian" ng-hide="photosSlider">
<ul>
<li ng-repeat="item in items">
<div class="image_title">
KungFu Panda
</div>
<a href="#">
<img ng-src={{item.img}}/>
</a>
</li>
</ul>
</div>
The items array, holds images url without slash in the tail of the url
When Angular send request for the image somehow slash added to the url
Any idea why the slash added and how to remove?
You can just remove the / from inside the ng-repeat itself.
Use this
<img ng-src={{item.img.substring(0, item.img.length - 1)}}/>
I have incoming JSON:
[{"key":"browser","value":"Chrome"}, {"key":"geo","value":"false"},{"key":"os","value":"MacOS"}]
And I have to display this by using Handlebars template.
I can't use the construction below because **sometimes I have only 2 objects inside JSON:**
Backbone Model
attr.browser = attr[0];
attr.geo = attr[1];
attr.os = attr[2];
Handlebars template:
<ul>
{{#if browser}}
<li>{{browser.key}}</li>
<li>{{browser.value}}</li>
{{/if}}
{{#if geo}}
<li>{{geo.key}}</li>
<li>{{geo.value}}</li>
{{/if}}
{{#if os}}
<li>{{os.key}}</li>
<li>{{os.value}}</li>
{{/if}}
</ul>
I found the answer, maybe it will be useful for somebody:
So, if you have a Backbone.Model with list of objects inside, like this:
[{"key":"browser","value":"Chrome"}, {"key":"geo","value":"false"},{"key":"os","value":"MacOS"}]
You probably can use this template for display contents of each object:
<ul>
{{#each this}}
<li>{{key}}</li>
<li>{{value}}</li>
{{/each}}
</ul>
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.
I am working on a Backbone.js app and sending request to my API for JSON data to be show on the front end with Backbone Template.
The returned JSON has some HTML entities within the JSON array, and the HTML is getting printed as text.
Below is my template code:
{{#each this}}
<li>
<a > </a>
<section class="ip">
<p><% {{title}} %></p>
<h3>
<time class="timeago" datetime="{{pubDate}}"></time>
{{type}}
</h3>
</section>
</li>
{{/each}}
{{#unless this}}
<p>Der er pt ingen sociale opdateringer om denne artist</p>
{{/unless}}
Please help.
I'm not sure what templating engine you're using, but the syntax looks like Handlebars for the most part, so that's what I'm going to assume.
In order to escape HTML entities in Handlebars, you need to use {{{triple mustaches}}}
For example, you have JSON:
{
text: "<p>My paragraph</p>"
}
Your template might look like this:
<div>
{{{text}}}
</div>
And your output:
<div>
<p>My paragraph</p>
</div>
I'm creating a slide - so there's 3 images every one div like so
<div>
<img />
<img />
<img />
</div>
</div>
<img />
<img />
<img />
</div>
None of the code around the internet works flawlessly -
https://github.com/johanpoirier/resthub-backbone-stack/commit/8a318477d56c370d2a0af4da6eae9999c7bb29da
http://jaketrent.com/post/every-nth-item-in-handlebars-loop/
http://rockycode.com/blog/handlebars-loop-index/
http://www.arlocarreon.com/blog/javascript/handlebars-js-everyother-helper/
and yes including the answers here in stack overflow.
Can anyone provide some code that works perfectly at this current period (version of Ember/Handlebar)?
I have an array of models so i'd like to do something like
{{#each model}}
{{if index % 3 == 0}}
{{/if}}
{{/each}}
I have been finding that index or #index do not work from within the template, but you can access it from within a helper.
I've made an example here that demonstrates this:
http://jsbin.com/egoyay/1/edit
Edit: Adding code to answer, demonstrating {{else}} block
Handlebars helper (for non-Ember use):
Handlebars.registerHelper('ifIsNthItem', function(options) {
var index = options.data.index + 1,
nth = options.hash.nth;
if (index % nth === 0)
return options.fn(this);
else
return options.inverse(this);
});
Usage:
<ol>
{{#each model}}
<li>
{{#ifIsNthItem nth=3}}
Index is a multiple of 3
{{else}}
Index is NOT a multiple of 3
{{/ifIsNthItem}}
</li>
{{/each}}
</ol>
If you specify itemViewClass in each helper, then it will create a view for each item and set contentIndex property:
{{#each model itemViewClass="Ember.View"}}
{{view.contentIndex}}
{{/each}}
tested in Ember v1.1.0