Handlebars conditional block helper using promises: How can I make this work?


#1

Hey there,

I’m currently working on a permission check handlebars helper, which needs to resolve a few promises in order to decide whether a block of html should be displayed or not. And here’s the problem: Returning a promise will always evaluate to true for the handlebars helper that calls the function, even if the promise resolves to false.

I’ve now spent the better part of today trying to fix this, and I’d now like to ask the Ember community to help me out. Am I doing something incredibly stupid? Am I not seeing the obvious solution?

I have created a jsbin to illustrate the problem.

The can-do helper is defined at the bottom of the javascript tab. I added comments to guide you just a little. Also, there is console.log output in order to make sure the promise resolves to the right result. Unfortunately, I don’t have much experience developing Handlebars helpers, so I’m stuck here.

Any help from you to make this work is greatly appreciated! If you have further questions, don’t hesitate to ask!

P.S. off-topic: Is this the right place to ask for help? Or would you rather put this on Stackoverflow?

Regards Ralph


#2

The view layer is not promise aware, and this kind of thing as far as I know is not possible, although there may be some kind of hack that would work.

A better approach is to move the permissions check into the controller layers, and cause controller properties to update when the promise resolves. That way the view helper just operates on immediate values (not promises) that change over time, and the promise would set those properties correctly on the controller as it resolves.


#3

Hey Alex, thank you for your reply. What you say makes total sense to me, and I will try to walk into this direction. Still, I don’t have a proper concept for managing permissions in one central controller (and only there), and to use computed properties based on specific ember data records, but I will try experimenting with this tomorrow. If I come up with something, I’ll let you know.

Thank you again for pointing me into this direction! :smile:


#4

I definitely agree that this kind of logic should live in a controller, but for handling async queries in a a template, you could use a pattern like this: http://emberjs.jsbin.com/kapaf/1/edit?html,js,output. fake* functions would be replaced with the $.get lookups or what have you.


#5

Hey, sorry for getting back to this topic as late as this, but I was sick for a few days (all is well now).

@pdufour, thank you for your example, I learned a ton by looking at this.

Based on both of your input I tried implementing this a) as a component and b) as a controller property.

a) Component: http://emberjs.jsbin.com/kivez/2, source: http://emberjs.jsbin.com/kivez/2/edit

b) Controller: http://emberjs.jsbin.com/kivez/3, source: http://emberjs.jsbin.com/kivez/3/edit

Both ways do work, but I find the component approach to be more flexible, as I can just pass in arbitrary objects and don’t have to wrap things in controllers. But maybe it is possible to simplify things in the controllers example?

@alexspeller, is this about what you had in mind (“move the permissions check into the controller layers”)? Or would you do something completely different than a mixin?

I’d appreciate if you would find the time to look at my approach and tell me what you think about it.