For a bootstrap carousel item <div class="item"> the first item needs to be active
div class="item active"> though only the first the item
Thought to write a Handlebars Helper, to loop through like this:
<div class="item active">
<div class="foo">{{foo.[0]}}</div>
</div>
{{#each resArray foo}}
<div class="item">
<div class="foo">{{this}}</div>
</div>
{{/each}}
..though how would this be written correctly?
Handlebars.registerHelper("resArray", function(array) {
return array[1 to array.length];
});
Also, where would this helper go? ..in my node server.js file where Handlebars is assigned?
Turns out it's as easy as:
{{#each foo}}
{{#if #first}}
<div class="item active">
<div class="foo">{{this}}</div>
</div>
{{else}}
<div class="item">
<div class="foo">{{this}}</div>
</div>
{{/if}}
{{/each}}
Use the following code:
{{#each foo}}
<div class="item {{#if #first}}active{{/if}}">
<div class="foo">{{this}}</div>
</div>
{{/each}}
Related
I'm trying to display some json data I got from a get request. So far I've been able to display other arrays with no problem, but I'm having trouble displaying this particular array for some reason, and I'm not getting any errors.
the one that won't display correctly is the showtimes array.
<div *ngIf="show">
<div *ngFor="let shows of show"class="showtime">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{shows.title}}</h3>
</div>
<div class="panel-body" >
<div class="row">
<div class="col-md-7 col-sm-5 col-xs-12 ">
<img class="thumbnail movie_pic" src="http://developer.tmsimg.com/{{shows.preferredImage.uri}}?api_key={{api}}"><br>
</div>
<div class="col-md-5 col-sm-7 col-xs-12">
<ul class="list-group">
<li class="list-group-item">Genres: {{shows.genres}}</li>
<li class="list-group-rel">Release Date: {{shows.releaseDate}}</li>
<li class="list-group-rel">{{shows.longDescription}}</li>
<li *ngFor="let shows of show.showtimes" class="list-group-rel">shows.theatre.name</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
You are missing {{}} expression
<li *ngFor="let shows of show.showtimes" class="list-group-rel">{{shows.theatre.name}}</li>
EDIT
Change it to some other variable name, since you are already using shows,
<li *ngFor="let showdetail of show.showtimes" class="list-group-rel">{{showdetail.theatre.name}}</li>
As it looks from your snapshot, the array of objects is stored in variable showtimes, if that is the case, try the below code:
<li *ngFor="let detail of showtimes" class="list-group-rel">
{{detail.theatre.name}}
</li>
A nested ngFor loop solved the problem..
<div *ngFor="let shows of show">
<div *ngFor="let detail of shows.showtimes">
<p>{{detail.theatre.name}}</p>
</div>
</div>
works perfectly, thanks for the help
I'm trying to capture data of the whole {{#each categories}} but my button .toggle-addToSet I use to do that is not capturing all the way to the top, it's only capturing data for {{#each set}} which is within {{#each categories}} unfortunately the data I need is not in there, therefore I need a way to capture data beyond {{#each set}} all the way to {{#each categories}}
this is what it looks like in the HTML
<ul>
{{#each categories}}
<li class="myIdd">
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
<!-- data being captured is only below this, but i need it to capture up until li class ="myIdd" -->
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<!-- This button is what i'm using to try and capture the data all the way to li class ="myIdd" -->
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
<!-- end of capture -->
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/each}}
</ul>
In my template helper, it's like this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
}
});
where var ob = this is only capturing
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<!-- This button is what I'm using to try and capture the data all the way to li class ="myIdd" -->
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
But as discussed, I need it to capture the whole document i.e
{{#each categories}}
capture everything in here
{{/each}}
When you're calling {{#each set}}...{{/each}} you're changing the context of inner block.
I'm suggesting to use {{#each catSet in set}}...{{/each}} this won't change the context of the each block, but will introduce new catSet variable, as described here
In your case:
<ul>
{{#each categories}}
<li class="myIdd">
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
<!-- data being captured is only below this, but i need it to capture up until li class ="myIdd" -->
{{#each catSet in set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{catSet.name}}</span>
</div>
<div class="card-footer">
<!-- This button is what i'm using to try and capture the data all the way to li class ="myIdd" -->
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
<!-- end of capture -->
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/each}}
</ul>
I have a print button that am using an {{#if}} conditional to show when a box gets expanded. I want the box to be expanded and then show the print icon at the foot of the box. But for some reason it is getting rendered early and shown in line with the collapsed box then put in the right place once the box is fully expanded. Here is my code:
Print Icon Template:
{{#if view.showPrintButton}}
<div class="print pull-right">
Print Discussion<i class="fa fa-print"></i>
</div>
{{/if}}
Box template:
{{#if permissions.comment}}
<div {{bindAttr class="controller.audienceIsShared:shared view.commentEditorExpanded:expanded :createComment"}}>
<div class="author-image-container content">
<img src="{{unbound Informal.Registry.user.pictureUrl}}" class="author-image pull-left" />
</div>
{{#if view.commentEditorExpanded}}
<div class="comment-editor-container content">
<div class="boxSizingDefault text">
{{
view view.commentEditorClass
disabledBinding="view.commentFormDisabled"
viewName="commentEditor"
valueBinding="controller.commentInProgress.initialBody"
attachmentsBinding="controller.commentInProgress.attachments"
}}
</div>
{{#if controller.audienceIsShared}}
<div class="contextualMessage">This comment will be seen across business units</div>
{{/if}}
</div>
{{#if notificationRecipients.length}}
<div class="notificationRecipients small detail">
<span>These subscribers will be notified of your comment:</span>
{{#if notificationRecipientsIsExpandable}}
{{#if view.notificationRecipientsExpanded}}
{{#with sortedNotificationRecipients}}{{> initials}}{{/with}}
{{else}}
{{#with collapsedNotificationRecipients}}{{> initials}}{{/with}}
<span class="link" {{action "expandNotificationRecipients" target="view"}}>
, {{collapsedNotificationRecipientsRemainingCount}} more...
</span>
{{/if}}
{{else}}
{{#with sortedNotificationRecipients}}{{> initials}}{{/with}}
{{/if}}
</div>
{{/if}}
View:
showPrintButton: function () {
return (this.get("expanded") !== false) && !this.get("editorExpanded");
} .property("expanded", "editorExpanded")
Thanks!
I set up an ng-repeat to rollout a bunch of elements from a JSON file however I would like each element to have a incremental class name .item-1, .item-2, .item-3.
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ item.length }}"></span>
</div>
</div>
I would like to add the number to class="item-{{ item.length}}" but I can't seem to get this working.
I don't know what is the benefit of generating dynamic class names like this. A class should mean a class of similar objects.
It's still possible with $index:
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>
https://docs.angularjs.org/api/ng/directive/ngRepeat
As documented on https://docs.angularjs.org/api/ng/directive/ngRepeat just use $index
<div ng-controller="itemCtrl">
<div class="item" ng-repeat="item in items">
<span class="item-{{ $index }}"></span>
</div>
</div>
I recently went from ember rc8 to 1.0.0 and to ember-data beta-2. When I did this, there were several error messages but this one I cannot figure out:
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
I am currently in the process of getting into a jsbin to debug but in the meantime I created this album to demonstrate what is going on : Album
Here is the Route when the error is displayed:
App.BadgeBasicRoute = Ember.Route.extend({
model: function(params) {
return this.modelFor('badge');
}
})
and its parent route:
App.BadgeRoute = Ember.Route.extend({
model: function(params) {
return this.store.find('badge',params.badge_id);
},
afterModel: function(params) {
return this.transitionTo('badge.basic', params)
}
});
and here are the templates:
BadgeBasic.hbs
<div class="row">
<div class="col col-lg-12">
<h3>Basic Info</h3>
<hr>
<div class="row page-header-title">
<div class="col col-lg-11">
<h4>Tag Line</h4>
</div>
{{! test comment }}
{{#view App.EditTagLineView}}
<h4 {{bindAttr class=":glyphicon isEditingTagLine:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
{{/view}}
</div>
<p>
{{#if isEditingTagLine}}
{{view Ember.TextField valueBinding="short_description" class="form-control" style="padding-top:10px"}}
<hr>
<button {{action saveTagLine}} class="btn btn-success">Save</button>
{{else}}
{{#if short_description}}
{{short_description}}
{{else}}
No tag line provided
{{/if}}
{{/if}}
</p>
<div class="row page-header-title">
<div class="col col-lg-11">
<h4>
Description
</h4>
</div>
{{#view App.EditDescriptionView}}
<h4 {{bindAttr class=":glyphicon isEditingDescription:glyphicon-nothing:glyphicon-pencil :edit-button"}}></h4>
{{/view}}
</div>
<p>
{{#if isEditingDescription}}
{{view Ember.TextArea valueBinding="full_description" class="form-control" rows="6"}}
<hr>
<button {{action saveDescription}} class="btn btn-success">Save</button>
<span class="glyphicon glyphicon-info-sign"></span> More on Markdown
{{else}}
{{#if full_description}}
{{markdown full_description}}
{{else}}
<span class="text-muted">no description provided</span>
{{/if}}
{{/if}}
</p>
</div>
</div>
<div class="row page-header-title" >
<div class="col col-lg-11">
<h4>
Mentor
</h4>
</div>
<div class="col col-lg-1">
<h4 class="glyphicon glyphicon-pencil edit-button"></h4>
</div>
</div>
{{#if mentor}}
<address>
{{log mentor}}
<strong> {{mentor.employee_preferred_name}}</strong>
<br>
{{#if mentor.phone}}
<abbr title="Phone">P:</abbr> {{mentor.phone}} <br>
{{else}}
<small> no phone number provided </small> <br>
{{/if}}
{{#if mentor.email}}
<abbr title="Email">E:</abbr> {{mentor.email}}
{{else}}
<small> no email number provided </small> <br>
{{/if}}
</address>
{{/if}}
</div>
Category.hbs
<div class="col col-lg-3 menu2">
<ul style="">
<li class="menu2-header">
<button style="background:#5E9EF3;border:none" class="btn btn-sm btn-primary">New</button>
</li>
{{#each badge in badges}}
{{#link-to "badge" badge tagName="li"}}
<h6 style="">
{{badge.type}}
</h6>
<h4 style="">
<strong>{{badge.title}}</strong>
</h4>
<p>
{{badge.short_description}}
</p>
{{/link-to}}
{{else}}
<p class="lead text-center" style="margin-top:2em">
No Badges in {{label}}
</p>
{{/each}}
</ul>
</div>
<div class="col col-lg-7">
{{outlet}}
</div>
Categories.hbs
<div class="col col-lg-2 menu1">
<ul>
{{#each category in model}}
{{#if category.parent}}
{{else}}
<li class="menu1-header" > {{category.label}} </li>
{{#if category.children}}
{{#each child in category.children}}
{{#link-to 'category' child tagName="li"}}
{{child.label}}
{{/link-to}}
{{/each}}
{{/if}}
{{/if}}
{{/each}}
</ul>
</div>
{{outlet}}
Let me know if you need any other information. Any help would be greatly appreciated.
I've run into this a time or two in the past and it's almost always been due to wrapping some handlebars directive in regular html comments. Something like:
<!--
{{#if something}}hey!{{else}}ho!{{/if}}
-->
I ended up rebuilding the badgeBasic.hbs file and it turns out there were unmatched html tags. I do not know why this fixed it but it did.