ef4/ember-elsewhere

setting name=null breaks {{from-elsewhere}}

Opened this issue · 6 comments

grapho commented

In this twiddle, I am binding a value to name in a {{from-elsewhere

It appears that, if the binding becomes null it will break the helper, even if you set name back to a valid string.

the only way the helper continues to work is if you are consuming the name binding somewhere else in the template.

this is confusing because the binding i am using is not a computed property.. so im not quite sure why i need to consume it for the helper to work?

https://ember-twiddle.com/dd9c2e80c52c98eb3860b132abc74c17?openFiles=templates.application.hbs%2C

you can reproduce the behavior in this twiddle if you remove the {{activeComponent}} at the top of application.hbs

grapho commented

You can label this as a low-priority issue... my current solution is to just wrap the helper in an {{#if to guard against name being null.

ef4 commented

We should fix this so it doesn't break on name=null.

But your example seems like a weird use case for this add-on. I am curious what you are trying to do and why the regular {{component ...}} helper can't do it.

grapho commented

Elsewhere allows me to have much more varied components render in the same place... where {{component}} helper narrows you in to a more uniform component invocation.

for instance if two components have completely different attrs and/or actions... the {{component}} helper would force me to pass all the attrs in all at once...
And what about two components that have overlapping attrs content or action for instance.. but they need to be bound to different things? {{component}} helper again would force me to use some sort of {{if}} business.. super messy after a while.

Elsewhere, so far has been the cleanest solution for me and the specific UI that I am building... I have an uncommon use case perhaps.. but a valid one as far as i can see.

At any rate, if the {{from-elsewhere would gracefully just render nothing or even just an empty <div> by default, that should be acceptable, i would think?

ef4 commented

But you still must have all those other invocations in your template somewhere anyway. For example:

{{#if activeComponent}}
  {{from-elsewhere name=activeComponent}}
{{/if}}

{{to-elsewhere named="general-info" send=(component "general-info" info=info action=(action 'infoAction'))}}
{{to-elsewhere named="product-info" send=(component "product-info" product=product)}}

Is equivalent to this, which is both simpler and faster:

{{#if (eq activeComponent "general-info")}}
  {{general-info info=info action=(action 'infoAction') }}
{{else if (eq activeComponent "product-info") }}
  {{product-info product=product}}
{{/if}}
grapho commented

ah but it is more complex than that.

imagine a template divided into quadrants. each quadrant has tabbed panels. then imagine a large list of component invocations. those components can render into any one of those quadrants in any configuration, via the tabbed navigation, dragging and dropping tabs into other quadrants also "moves" said component into the new quadrant.

i guess the main thing is "any component, anywhere" as easily as possible without duplicating invocations.

fwiw.. i already have this UI finished.. using the {{component}} helper successfully... but i ran into some walls when adding more and more features into each component.

oh and also ( :p :p ) I've already converted the whole thing to ember-elsewhere and it works great!

ef4 commented

👍