Best way to namespace multiple or suit of emberjs apps

Question

First a Merry Xmas to you and thanks for helping with suggestions.

My question is still on emberjs namespace but this time in the context of a suite of multiple emberjs apps which will be contained within multiple rails-engine, so that each emberjs app is a standalone app with its own controllers, models, views and routers. However, they will still need to share ember-data associations. These rails-engines will inturn be included in the main-rails app where each engine represents a major feature of the app.

In this jsfiddle, I came up with 3 approach to namespace, but I will like to know which one is the emberjs way:

                **Approach 1** 

//Each emberjs app with its own namespace

MainRailsApp = Ember.Application.create();

RailsEngine = Ember.Namespace.create();

RailsEngine2 = Ember.Namespace.create();

MainRailsApp.Store= DS.Store.extend();    **inherits from Ember.Application**
MainRailsApp.Router = Em.Router.extend()  **inherits from Ember.Application**

console.log(RailsEngine.toString());       //RailsEngine
console.log(RailsEngine2.toString());      //RailsEngine2


RailsEngine.Model = DS.Model.extend
RailsEngine2.model = DS.Model.extend

Can this model's share association though they inherit from different namespace

Contact.Model = RailsEngine.Model.extend({
       address:   DS.attr('string'),
       user:      DS.belongsTo('User.Model')      
});

User.Model = RailsEngine2.Model.extend({
      name: DS.attr('string'),
      contacts: DS.hasMany('Contact.Model'),

});



                 **Approach 2**

//All the different emberjs apps share one namespace but different instances

Yp = Ember.Namespace.extend();

UserRailsEngine = Yp.create();

ContactRailsEngine = Yp.create();

PaymentRailsEngine = Yp.create();

Yp.Jk = Ember.Application.extend();

Yp.Jk.create();
Yp.Router = Em.Router.extend();      **inherits from the Ember.Namespace**
Yp.Store = DS.Store.extend({ });     **inherits from the Ember.Namespace**


console.log(UserRailsEngine.toString());         //UserRailsEngine

console.log(PaymentRailsEngine.toString());      //PaymentRailsEngine

UserRailsEngine.Model = DS.Model.extend
ContactRailsEngine.Model = DS.Model.extend

Can this models share association, they have one namespace but different instance

Contact.Model = ContactRailsEngine.Model .extend({
       address:   DS.attr('string'),
       user:      DS.belongsTo('User.Model')      
});

User.Model = UserRailsEngine.Modelextend({
      name: DS.attr('string'),
      contacts: DS.hasMany('Contact.Model')    
});


            **Approach 3**

//One namespace but multiple subclasses of the namespace for each emberjs app

Mynamespace = Ember.Namespace.extend();

Order = Mynamespace.extend();

OrderRailsEngine = Order.create();

Event = Mynamespace.extend();

EventRailsEngine = Event.create();

console.log(OrderRailsEngine.toString());           //OrderRailsEngine

console.log(EventRailsEngine.toString());           //EventRailsEngine


**Additional questions**

1. Can I still associate ember-data models using hasMany and belongsTo in all of the 3 approach.

1. I am still not sure how the router will be handled. What do you think the namespace should be in the main-app and each of the rails-engine, so that they still work seamlessly.

2. What your suggestion on how to handle ember-data DS.Store namespacing since each ember-data model will be namespaced to each engine and I still want the ember-data DS.Store to recognize and work with the the different emberjs models contained in the engines.

3. Are Ember.Namespace auto-initialized just like Ember.Application is auto-initialized.

4. Alternative patterns are welcome.

Many thanks for your time.

Answer 1

A modified approah 2 seems to be the emberjs way to go. All the different emberjs apps will still share one namespace but instead of different instances of that namespace, they will share one instance. Final jsfiddle

This approach can be seen from the code pasted below, which was extracted from the link below:

https://github.com/emberjs/data/blob/master/packages/ember-data/tests/integration/embedded/embedded_dirtying_test.js

var attr = DS.attr;
var Post, Comment, User, Vote, Blog;
var Adapter, App;
var adapter, store, post;
var forEach = Ember.EnumerableUtils.forEach;

App = Ember.Namespace.create({ name: "App" });

User = App.User = DS.Model.extend({
  name: attr('string')
});

Vote = App.Vote = DS.Model.extend({
  voter: attr('string')
});

Comment = App.Comment = DS.Model.extend({
  title: attr('string'),
  user: DS.belongsTo(User),
  votes: DS.hasMany(Vote)
});

Blog = App.Blog = DS.Model.extend({
  title: attr('string')
});

Post = App.Post = DS.Model.extend({
  title: attr('string'),
  comments: DS.hasMany(Comment),
  blog: DS.belongsTo(Blog)
});

Adapter = DS.RESTAdapter.extend();

Adapter.map(Comment, {
  user: { embedded: 'always' },
  votes: { embedded: 'always' }
});

Adapter.map(Post, {
  comments: { embedded: 'always' },
  blog: { embedded: 'load' }
});

adapter = Adapter.create();

store = DS.Store.create({
  adapter: adapter
});

So in the contest of using it across rails engines it becomes:

   //App = Ember.Namespace.create();
 App = Ember.Namespace.create({ name: "App" });
 Main = App.MainApp = Ember.Application.extend();
 Main.create();

 UserEngine = App.UserEngine = DS.Model.extend({
    name: DS.attr('string')
 });

 VoteEngine = App.VoteEngine = DS.Model.extend({
   voter: DS.attr('string')
 });

 console.log(Main.toString());                       //App.MainApp
 console.log(UserEngine.toString());                 //App.UserEngine 
 console.log(VoteEngine.toString());                 //App.VoteEngine