Emberjs conditional output in a template with handlebars

1
votes

I got following models:
A Community with a name, members and moderators(both are Users). Users, who have an id and a name.

In the CommunityMembers template i want to show all the users, and if that user is a moderator, i want to add some extra saying that he's a moderator

<script type="text/x-handlebars" data-template-name="communityMembers">
  //model contains an array of users in a community
  {{#each user in model}}
    <li>{{user.name}}</li>
    {{#each moderator in controllers.community.moderators}}
      //here is the problem-->
      {{#if moderator.id == user.id}}
        <b>this is a moderator</b>
      {{/if}}
    {{/each}}
  {{/each}}
</script>

i know that in handlebars you can't use moderator.id==user.id but it's an easy way to say what i want to do.

i tried to write a handlebars helper but when i checked in the helper what my argument was i got a string saying: "moderator.id" or "user.id" so that didn't work.

i also tried to do it with a method in my community-object:

App.Community = Ember.Object.extend({
  isModerator: function(community, user_id){
    return community.moderators.indexOf({"id":user_id})!=-1;
  }
});

in the template:

{{#if isModerator(controllers.community,user.id)}}
      <h>this is a moderator</h>
{{/if}}

but that gave me errors in the template like:

. Compiler said: Error: Parse error on line 12: .../if}}
{{#if isModerator(controll
----------------------^ Expecting 'CLOSE', 'CLOSE_UNESCAPED', 'STRING', 'INTEGER', 'BOOLEAN', 'ID', 'DATA', 'SEP', got 'INVALID'

Is there anyone who knows how to deal with this?

2
ember.jshandlebars.js

2 Answers

3
votes

You can't do this in Handlebars (as you said) and you shouldn't try do mimic this behavior with a helper. This limitation is intentionally designed into the templating, because it is considered a bad practice to have too much logic in the template. Instead your goal should be to write your template like this:

<script type="text/x-handlebars" data-template-name="communityMembers">
  //model contains an array of users in a community
  {{#each user in controller.usersWithModeratorFlag}}
    <li>{{user.name}}</li>
    {{#if user.isModerator}}
      <b>this is a moderator</b>
    {{/if}}
  {{/each}}
</script>

Now you are probably asking yourself how to implement this attribute. You could try something like this (if you can't embed this attribute into your user objects):

App.CommunityMembersController = Ember.ArrayController.extend({
  needs : ["community"],
  usersWithModeratorFlag : function(){
    var moderators = this.get("controllers.community.moderators");
    return this.get("model").map(function(user){
      if(moderators.contains(user)){
        user.set("isModerator", true);
      }
    } 
  }.property("model.@each", "controllers.community.moderators.@each")
});

As you can see, it is quite easy to move this logic out of the template and into the controller, where it belongs.

0
votes

You can use ember-truth-helpers

{{#if (eq moderator.id user.id)}}
  <b>this is a moderator</b>
{{/if}}