How do I make a conditional helper with ember-cli and handlebars 2.0.0? - ember.js

Question

I am trying to achieve something similar to the form or function of:
{{#if has-permission "my_permission"}}
// do some stuff here
{{else}}
// fallback
{{/if}}
OR
{{#hasPermission session.user.permissions "my_permission"}}
I cannot figure this out. I've read this but there isn't much explaining on anything other than helpers that render content or alter it e.g. {{render "something"}}
When I try to make it a conditional I get this:
registerBoundHelper-generated helpers do not support use with Handlebars blocks.
Any help greatly appreciated, thanks!
EDIT:
My User object is serialized as such:
{"User": {
"id": 3,
"name": "john doe",
"permissions": [
"view_projects",
"edit_milestones",
"change_widgets"
]}
}
I want to be able to check a certain permission in the template, not bind a specific one to a computed property.
PS Im using ember 1.9.1, latest data and handlebars 2.0

Answer 1

According to the docs, this is not possible with a bound helper
Bound helpers do not support use with Handlebars blocks or the addition of child views of any kind.
What you can do is push that logic to the controller as follows:
App.IndexController = Ember.ArrayController.extend({
permission: "my_permission",
hasPermission: function(){
var permission = this.get('permission');
return permission === 'my_permission';
}.property('permission')
});
Then, in your template you can do:
<script type="text/x-handlebars" data-template-name="index">
{{#if hasPermission }}
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
{{ else }}
// fallback
{{/if}}
</script>
Working solution here

Answer 2

You can make use of Ember's boundIf/unboundIf default helpers to create a nice and powerful helper to manage client side's user permissions and end up with something like this:
{{#can 'createPost'}}
<button {{action newBlogPost}}>New Post</button>
{{else}}
You don't have permission to post
{{/can}}
{{#each post in controller}}
<a {{action viewPost post href=true}}>{{post.title}}</a>
{{#can 'editPost' post}}
<button {{action editPost post}}>Edit</button>
{{/can}}
{{/each}}
If you take a look at the Ember's source code and see how if works:
Ember.Handlebars.registerHelper('if', function(context, options) {
Ember.assert("You must pass exactly one argument to the if helper", arguments.length === 2);
Ember.assert("You must pass a block to the if helper", options.fn && options.fn !== Handlebars.VM.noop);
return helpers.boundIf.call(options.contexts[0], context, options);
});
You can see that it only does some sanity checking and hands off to boundIf:
Ember.Handlebars.registerHelper('boundIf', function(property, fn) {
var context = (fn.contexts && fn.contexts[0]) || this;
var func = function(result) {
if (Ember.typeOf(result) === 'array') {
return get(result, 'length') !== 0;
} else {
return !!result;
}
};
return bind.call(context, property, fn, true, func, func);
});
This in turn calls bind which handles setting up all the observers and re-rendering when properties change. The result of the func it builds determines whether to display the content or not.
So if you create a helper which calls boundIf with some property to observe on an object, it will take care of the rest for us.
Handlebars.registerHelper('can', function(permissionName, property, options){
// do magic here
Ember.Handlebars.helpers.boundIf.call(someObject, "someProperty", options)
});
Lets fake out the magic and see what happens:
Handlebars.registerHelper('can', function(permissionName, property, options){
var permission = Ember.Object.create({
can: function(){
return true;
}.property()
});
Ember.Handlebars.helpers.boundIf.call(permission, "can", options)
});
Hmm, that leaves the content as hidden. It seems that it’s not calling the can on our permission.
If we look back at boundIf then we can see that it’s looking up the context on the options and only falls back to this if there’s not one set:
var context = (fn.contexts && fn.contexts[0]) || this;
We can get around this by nuking the contexts on the options we pass through to boundIf. (I’m not sure if this will cause issues, but it worked for me… YMMV and all that).
Handlebars.registerHelper('can', function(permissionName, property, options){
var permission = Ember.Object.create({
can: function(){
return true;
}.property()
});
// wipe out contexts so boundIf uses `this` (the permission) as the context
options.contexts = null;
Ember.Handlebars.helpers.boundIf.call(permission, "can", options)
});
If you twiddle the result of can from true to false then we see our content disappear and re-appear, success!
This example goes into more detail in this excellent post by Richard Livsey