I want to display information based on a user being iterated on a page.
I have the following template:
<template name="allUsers">
<div>
{{#each user}}
{{username}}<br/>
<!-- This is where I need some guidance -->
{{#if roles == 'webmaster}} <!-- What's the correct way to do this? -->
This user is a webmaster
{{/if}}
{{/each}}
</div>
</template>
I'm using the alanning:roles package and in the server I have been sure to publish the roles field for users. roles.[0] will return webmaster for now and roles.[1] returns admin... But I know further down the line with adding roles it won't have the standard key of 0 = webmaster and 1 = admin.
Is there a way to just test IF the roles array contains 'webmaster' to be displayed on the client?
Here's a global template helper to help out with this.
Template.registerHelper( 'isUserInRole', function( userId, role ) {
return Roles.userIsInRole(userId, role);
});
<template name="allUsers">
<div>
{{#each user}}
{{username}}
{{#if isUserInRole _id 'webmaster'}}
This user is a webmaster
{{/if}}
{{/each}}
</div>
</template>
**Edited based on the first comment.
Try this:
<template name="allUsers">
<div>
{{#each user}}
{{username}}<br/>
<!-- This is where I need some guidance -->
{{#if roles.[1] == 'webmaster}} <!-- What's the correct way to do this? -->
This user is a webmaster
{{/if}}
{{/each}}
</div>
</template>
Related
I have a problem with my emberjs view. I cannot access to the model defined in the parent view. I have tested with view.parentView.model and this not working
Here is my code :
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each view.content}}
<h1>{{model.allowed_email_domain}}</h1> <!-- not working -->
{{/each}}
Thank's
Ignoring the fact that you are using the view and probably shouldn't be, it's because you've changed the context inside the each loop.
Depending on the version of handlebars/htmlbars you are using
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each view.content as |item|}}
<h1>{{model.allowed_email_domain}}</h1> <!-- working -->
{{/each}}
<div class="allowed_name">{{model.allowed_email_domain}}</div><!-- working -->
{{#each item in view.content}}
<h1>{{model.allowed_email_domain}}</h1> <!-- working -->
{{/each}}
I have an app setup using ember-cli 0.1.1 and I'm using ember-simple-auth (along with devise cli plugin) for login. In my application template, I have a menu with a conditional wrapped around it:
{{#if session.isAuthenticated }}
<div class="nav_user">
<p>{{session.user_name}}</p>
<p class="user_account">{{#link-to 'account-settings'}}<img src="assets/images/gear.png" />{{/link-to}}</p>
</div>
<ul>
<li>{{#link-to 'horses'}}My Horses{{/link-to}}</li>
<li>{{#link-to 'veterinarians'}}Veterinarians{{/link-to}}</li>
<li>{{#link-to 'documents'}}Documents{{/link-to}}</li>
<li>{{#link-to 'notes'}}Notes{{/link-to}}</li>
</ul>
<ul>
<li><a {{action 'invalidateSession'}}>Logout</a></li>
</ul>
{{/if}}
The problem is that after a successful login, I transition to another route and if I immediately open the menu, the non-authenticated menu is what appears. If I refresh, then I get the correct menu contents. I'm looking for a way to updat session.isAuthenticated after a successful login, prior to transitioning to the new route. Thanks in advance for any help.
I have a scenerio in which i wanted to render some properties in the child view with the properties of the parent view but on the basis of some properties. But when the properties evaluates to false the view should be destroyed but its giving error as:
cannot call unchain of undefined and some errors also related to this.
code:
Template
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="address">
{{item.Address.addressline1}}<br />
{{item.Address.addressLine2}}<br />
{{item.Address.city}}, {{item.Address.state}}<br />
</script>
<script type="text/x-handlebars" data-template-name="index">
{{#if addressVisible}}
<button {{action hideAddress}}> Hide Address </button>
{{else}}
<button {{action showAddress}}>Show Address</button>
{{/if}}
<ul>
{{#each item in model}}
<li>
{{item.name}}<br />
{{#if addressVisible}}
{{view App.AddressView}}
{{/if}}
</li>
{{/each}}
</ul>
</script>
I have created a fiddle to show my issue:
http://jsbin.com/inoroj/5/edit
When we click on showAddress it shows all the address views but when clicked on hide all views should hide, but instead it raises unchain error.
It looks like for some reason Ember did not like your property being capitalized. By changing Address to address the app worked as expected. I made a few other small changes as well.
http://jsbin.com/uquyuv/1/edit
I would like to trigger an action on the ArrayController of child elements in the parent view. How would I go about that?
Specifically, I am trying to add a new child element to a hasMany relationship. It works fine using {{action new}} in the view of the child elements, but I am not sure how to do this from the parent view.
<script type="text/x-handlebars" data-template-name="parents">
<b>List</b><br />
{{#each parent in controller}}
{{ parent.name }} <br />
{{ render "kids" parent.children }}
<a href="#" {{ action parent.children.new target="controller" }}>Parent View Make Kid</a<br/>
<br />
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="kids">
{{#each kid in controller}}
> {{ kid.name }} <br />
{{/each}}
<a href="#" {{ action new }}> Kid Controller Make Kid</a><br />
</script>
In the above "Kid Controller Make Kid" works fine, "Parent Controller Make Kid" does not.
Please find a fiddle illustrating the problem here: http://jsfiddle.net/chopper/zHnQC/2/
Thanks!
From the parent's view you can't access directly to the children's controller like that. I think the best option would be to implement a newKid method on ParentsController responsible to create the new record on its model.
I've forked your fiddle and implemented a working example: http://jsfiddle.net/pxkys/1/
Hope this helps!
I have a controller with data about user accounts (icon, name, provider, etc.). Within the output of the each loop I have a view that will build a CSS class dynamically based on the provider passed in via that specific model.
<script type="text/x-handlebars" data-template-name="accountItem">
{{#each account in controller}}
{{#view App.AccountView}}
<h4>{{account.name}}</h3>
<img {{bindAttr src="account.icon"}} />
<i {{bindAttr class="account.provider"}}></i>
{{/view}}
{{/each}}
</script>
App.AccountView = Ember.View.extend({
tagName: 'a',
classNames: ['avatar-image'],
providerClass: function(el) {
// do something
}
});
The question I have is two-fold.
How do you pass in "account", or the currently iterated item, into the view?
After you pass it in, how do you reference it?
I'm sure this is something that happens quite often but I can't seem to find any examples. Can anyone offer some input on this please?
Views has a special content property in a view which allows a more simple approach: you just use a name of the model's property without the view.content. part.
Also, when you're iterating over controller, you can omit the name of loop variable and use this instead, like in this guide. This is not necessary but can make the code a bit cleaner.
Also, from within view's template you generally don't need to reference the outside variables although you can if you like..
{{#each controller}}
{{#view App.IndexView contentBinding="this"}}
<h4>{{name}}</h4>
<img {{bindAttr src="icon"}} />
<i {{bindAttr class="provider"}}></i>
<i> {{icon}} </i>
<i>{{provider}}</i>
{{/view}}
{{/each}}
And you can always access the content property from within the view with:
this.get('content');
The currently iterated item can be passed into the view with the help of property bindings and it can be refered as "{{view.property}}" in the template. For example:
{{#each account in controller}}
{{#view App.IndexView itemBinding="account"}}
<h4>{{view.item.name}}</h3>
<img {{bindAttr src="account.icon"}} />
<i {{bindAttr class="account.provider"}}></i>
<i> {{view.item.icon}} </i>
<i>{{view.item.provider}}</i>
{{/view}}
{{/each}}
I have created a simple jsfiddle for the above case. Do check it and let me know if you were able to resolve the issues.
Fiddle url : http://jsfiddle.net/nCyn6/3/