In hierarchy modals without being "in template"?

@s12chung wrote:

It seems like common convention now to have "in template" modals, like with ember-modal-dialog:

In Template

<!-- button.hbs-->

<!-- 1 -->
<button {{action "toggleModal"}}>Toggle Modal</button>

<!-- 3 -->
{{#if isShowingModal}}
  {{#modal-dialog onClose="toggleModal"
                  targetAttachment="center"
                  translucentOverlay=true}}
    Oh hai there!
  {{/modal-dialog}}
{{/if}}

import Ember from 'ember';

export default Ember.Controller.extend({
  isShowingModal: false,
  actions: {
    toggleModal: function() {
      //--- 2 ---
      this.toggleProperty('isShowingModal');
    }
  }
});

However, I don't like this pattern... it forces you to create a flag for the modal and look for the {{modal-dialog}} in your template to follow the behaviour. I've preferred the "render controller" modals syntax (ex. http://ember.guru/2014/master-your-modals-in-ember-js)

Render Controller

<!-- button.hbs-->
<button {{action "showModal" "logout-modal" }}>Toggle Modal</button>

// application.js
// boilerplate, doesn't count as part of modal
export default Ember.Route.extend({
  actions: {
    showModal: function(name, model) {
      this.render(name, {
        into: 'application',
        outlet: 'modal',
        model: model
      });
    },
    removeModal: function() {
      this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

// not really needed
// logout-modal.js
export default Ember.Controller.extend({});

<!-- logout-modal.hbs -->
{{#my-modal title='Logout'}}
  Are you sure you want to logout?
{{/my-modal}}

This felt simpler because there's no flag or boilerplate code in button.js. The modal being it's separate controller/component made sense to me too.

So why are does common convention prefer "in template" modals?

My guess is this.render moves the modal to another part of the hierarchy---in it's own controller--- and the data-down actions-up pattern breaks.

I guess.... Given that button.hbs represents a button.js component or controller. button.js can't have "children components" without putting it in the button.hbs template...? Is that true?

I just wish there was another way to make modals while respecting the hierarchy.

Posts: 1

Participants: 1

Read full topic