Common functionality shared accros controllers - popups, notifications

Design
1

i’ve red quite a of lot tuts and articles on ember.js and made some basic stuffs - some sanbox and test things, complete login screen with many outlets, actions, ajax and so on… but I am now facing one problem.

Ember.js is for “Single Page Application” and I did not found a way (yet?) how can I make and share basic functionality across more “ember apps”/parts/pages?

I have some backend and then some modules (users, files, news,…) and each is made by classic:

App = Ember.Application.Create()

But I need to have some shared functionality and I dont want to repeat in at each app - I want to be able to show some notification - once from user app then from files app and so on. Or to have unified modal window, or function that check some things in background on server and push updates to notifications area that is running on each of those app parts…

How should I solve it? Is there any way of extending base App? or have to separates App on one page that comunicates to each other? I¨ve also red something about Ember namespaces but I am not sure if it is the right thing and how to user it :frowning:

note: Each module (dashboard, users, files,…) is loaded as new page (complete html, new scripts,…), but module itself work as a SPA and on AJAX.

Ember.js has awesome documentation but real word example articles on how to use it are showing slowly and I had no lucky finding some tut/article on solving this problem in real world.

Any code examples, tips, articles, tutorials or sample app would be great!

thank you very much!

also on SO: code reuse - ember.js - common functionality shared across controllers - popups, notifications - Stack Overflow

2

I’ve got some answer on SO from Edu that suggest I should use following (hope I am correct with it):

shared.js

App = Ember.Application.Create()
App.Notifications = Ember.ObjectController.extend({...})
Routes, etc...

Users.js (loaded only in Users module)

App.Users = Ember.ObjectController.extend({
  needs: ['notifications'],
  showNotif: ...
  ...
})

and so then I can call functions from Notif in App.User? is that right? is that correct way how to do it? many thanks!

3 
var AppNotification = Ember.Application.create({
  rootElement: '#notifications'
});
var AppUsers = Ember.Application.create({
  rootElement: '#users'
});

I just suggested this code… I edited the SO answer and for the communication I suggested you investigate Ember.intrumentation but I can’t help in this, I never used this class. I would be very interested in seeing your final code if you wish… Good luck

4

Thanks for tips and reply!

I’ve red about rootElement property and started playing with it yesterday. The Ember.Instrumentation also look interesting - I will have to give it a big try! When I will understand all and I will make it somehow I will try to make and post some sample app - definitley!

I have one question regarding your answer:

I’am currently having one App and two or more extended Object Controllers - You are suggestion have two Apps. Whats the difference please? I am currently using needs property to acces “parent” (shared) controller from eg UsersController - how can I call one App from another? Simply using AppNotification.somecontroller (or via _lookup_ - but i know I should not use that) in AppUsers or via the Instrumentation you are suggesting?

many Thanks!

5

I think the app object has the ability to capture all events in the root element that you configured, I don’t know if the object.extend can go, if you reach your requirements this way, go on it is up to you.

6

You say "app object has the ability to capture all events in the root element " - can I somehow send event, or trigger function from one App to another?

thanks!

7

I think yes, using ember.instrumentation class, but I don’t know how

8

just remembered you mentioned it earlier : ) sorry and thanks!

9

I just remembered (beer enligthment) other different way I’ve read months ago… load async code from the router there is also a JSBin example

You can have your notification js stuff and take the templates using this SO answer