CODEWITHSUNDEEP
ember.js
Chris McRae
Chris McRae

Reputation: 21

Create a modal dialog in Ember

I'm trying to open a modal dialog form in Ember - I have a form that I'd like users to submit a comment to before processing a workflow, but so far I've been unable to find any good documentation on how to open a modal dialog (where to put controllers, routes, models, etc.). I am new to Ember, so please bear with me. Thanks.

Upvotes: 1

Views: 9399

Answers (3)

Nico
Nico

Reputation: 792

I followed Ember Guru's guide called "Master you're modals" on Ember, and they work great!

  1. create template here:

create component called my-modal. Add the following in the components js:

export default Ember.Component.extend({
  actions: {
    ok: function() {
      this.$('.modal').modal('hide');
      this.sendAction('ok');
        }
    },
    show: Ember.on('didInsertElement', function() {
        Ember.on('hidden.bs.modal', function() {
          this.sendAction('close');
        }.bind(this), this.$('.modal').modal());
    })
});
  1. Add the following code to the components hbs (template):

<div class="modal fade"  data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title text-center">{{title}}</h2>
      </div>
        {{yield}}
        <div class="modal-footer">
        </div>
    </div>
  </div>
</div>

  1. Now you need to create a template for the specific use of the modal where you call the component. Call it: waitingModal or loadingModal or whatever you like. In this modal template you call the component like so:

    {{#my-modal title='Loading Modal' ok='save' close='removeModal'}} {{/my-modal}}

  2. Add the following to the application route:

    showModal: function(name, model) { this.render(name, { into: 'application', outlet: 'modal', model: model }); },

Lastly to call a modal after clicking a button, in the button's action you need to call:

this.send('showModal','loading-modal');

where loading-modal is the specific template you're calling.

and to remove the modal:

this.send('removeModal');

Hope this helps!

Upvotes: 1

ajile
ajile

Reputation: 686

I'm using ember-dialog. Just one command ember install ember-dialog and dialogs on aboard. Here is example of use you're looking for:

export default Ember.Controller.extend({

  // Injecting dialog service
  dialog: Ember.inject.service(),

  model: { username: "Something" },

  actions: {
    showForm: function() {
      this.get("dialog").blank("path-to-some-form", this, {
        acceptHandler: "save"
      });
    },
    save: function(presenter) {
      var isValid = true;
      if (isValid) {
        // Closing presenter
        presenter.accept();
      }
    }
  }

});

Template (/app/templates/path-to-some-form.hbs):

<form {{action "accept" on='submit'}}>
  {{!-- contextObject here is controller --}}
  {{input value=contextObject.model.username}}
  <button class="w-btn w-btn__default" type="submit">Send</button>
  <button class="w-btn w-btn__danger" type="button" {{action "decline"}}>Cancel</button>
</form>

Upvotes: 0

jnfingerle
jnfingerle

Reputation: 713

You could use an addon or implement the recipe from the cookbook.

Upvotes: 0

Related Questions