Yielding upstream

Design
1

Modals arise in all sorts of situations, often with dynamic content and interactions related to the context which triggers them. With this in mind, it makes sense to have a generic {{modal-dialog}} component into which the context-specific content can be yielded:

{{#if saving}}
  {{#modal-dialog blocking = true}}
    <label>
      Name your submission
      <br/>
      {{input value = name}}
    </label>

    <button {{action = save}}>
      Save
    </button>

    <button {{action 'saving' false}}>
      Cancel
    </button>
  {{/modal-dialog}}
{{/if}}

Thus {{modal-dialog}} can take care of generic concerns like positioning, focus, what to do when the user attempts to click behind the dialog, etc.

But CSS limitations, therefore DOM structural requirements

Sadly, to this day, the vagaries of CSS implementation still mean that judicious use of z-index & position: fixed can’t guarantee against overflow rules higher up the tree clipping content, meaning higher order view concerns can trash this implementation. It seems I have to resign myself to a more complicated mechanism whereby the modal has an ‘inlet’ — where contents and conditions are determined — and an outlet, at the top of the view tree, where we can guarantee the contents won’t be clipped.

Data Up Actions Down WTF

However, view implementation details are now intruding into the fundamentals of application execution flow, and it seems I’m now trying to pass data higher up the DOM tree in order to get actions lower down. The limitations inherent to Handlebars make this very difficult to reason about!

Can anyone help me figure out how I might be able to pass Handlebars content around other than a downward yield, or suggest some other method?

I’m currently considering using jQuery to lift contents up from the inlet to the outlet, but I’d really rather not!

2

I think this might be what you’re looking for: GitHub - yapplabs/ember-wormhole: Render a child view somewhere else in the DOM. (haven’t used it yet; but it looks pretty great)

2 Likes
3

That looks like exactly what I’m after! Thanks for the link — I’ll give it a spin tomorrow.

1 Like
4

It turns out very little magic is required to do this without breaking Handlebars. In the end I found the id-based API of Ember Wormhole to be arbitrarily convoluted, and simply wrote a component that appended its root element to the document body. No problems so far.