I’m trying to achieve something which I’m pretty sure used to be possible in a previous (pre 1.9) version of Ember, which is passing data to a view (or component) lazily. The real use case is some complex UI-component, but it boils down to this: I have a component, which displays data conditionally. Many of these components are included on a page, most are never used. The data is contained in a computed property in the controller, so they are only calculated once that property is get().
Now it used to be that I could do something like (illustrating with view because we’re talking old Ember here)
{{view "something" prop=computedProperty}}
and computedProperty would not be calculated unless the view did this.get('prop') somewhere (be it directly or indirectly in the handlebars). However, it currently seems that the computed property is calculated whenever it is passed to a view / component like this, which means a lot of unnecessary requests in the scenario described for the unused components.
Am I correct in that this no longer works, and does anyone know a workaround? I could of course pass the content as a path somehow and resolve it in the component once I need it, but that would clutter the call to the component and I would really like to prevent that. Another option would be some kind of content proxy that only loads when the component requests it to… It just seems that with the “bindings are only loaded when requested” philosophy this should be simpler somehow.
Does really nobody know an answer to this?
Can you illustrate your issue with a working example? I’m not able to follow what you are trying to achieve.
Sure. I’m going to make one up since the actual use case requires some explaining but it works just as well.
Say I’m listing a set of posts in a table, where each table row has the option to change the category of the post through a select box. The select box is the component in this case. So for each post we have something like:
{{some-select-component content=categories selection=post.category}}
Clearly I do not need the list of categories unless the select box is actually opened - and in most cases the category will not be changed so there is no need for that request. It seems however that just passing the content=categories evaluates the categories property without it being used anywhere else.
In my specific use case it actually gets a little worse, since each “post” has a potentially unique list of categories, so a list request is done for every post, which is very wasteful. My current workaround is a wrapper object for content, which has the list to lazy-load as a property, and the component knows this… Works, but it just seems so ugly.
What do you mean by request? The binding itself isn’t what is expensive, it’s that you’re doing something in your computed property or an observer that is triggering some kind of request - correct?
Please ember-twiddle/jsbin an example, will speed up understanding and my ability to offer a solution (and others).
Indeed you’re right - the computed property it binds fetches something from the server in this case.
I’ve created an Ember Fiddle (which is awesome by the way, didn’t know it existed until today) here: Ember Twiddle. As you can see, the categories property is evaluated without toggling the select box.