ember concerns implementation

Question

How would you implement concerns in ember. For instance, send invite functionality:

• user have 5 invites (store involved from fetching data)
• invite available from any application state
• it appears in modal
• it can be more than one more - thus {{outlet modal}} doesnt work as well
• user can enter email and send invite (available invites number decreased)

current modal implementation - thus cannot assign controller to a view...

openModal: function(modal) {
  var modalView = this.container.lookup(modal);
  modalView.appendTo(MS.rootElement);
}

Component approach doesnt work as for me: content (model) should be setuped by routed, i dont know event in component which can be useful for data fetching.

Nested routes doesnt work as well - to much to change.

I cant find any working approach for this, please help.

Thanks in advance.

Answer 1

You can assign a controller to a view. Here's a simple example where I can inject a view from anywhere in the page, assign it a controller, and when I repop up the view it has the same controller (if that was the intended outcome). If this doesn't get you going in the right direction, let me know.

You can use bubbling to allow it to be called from anywhere in the app as well.

http://emberjs.jsbin.com/uhoFiQO/4/edit

App.InviteView = Ember.View.extend({
  templateName: 'invite'

});

App.InviteController = Ember.Controller.extend({
  actions: {
    pretendToSend: function(){
     var invites =  this.get('invites'); 
      this.set('invites', invites-1);
    }
  }
});

App.ApplicationRoute = Ember.Route.extend({
  setupController: function(controller, model){
    var inviteController = this.controllerFor('invite');
    inviteController.set('invites', 5);
  },
  actions:{
    popInvite: function(){
      var inviteController = this.controllerFor('invite');
      // create/insert my view
      var iv = App.InviteView.create({controller: inviteController});
      iv.appendTo('body');
    }
  }
});