Using Ember in an existing website (Newbie)

1

Hi there,

As per the subject, I’m getting started with Ember.js. I’ve gone through a number of examples and tutorials and such. All in all I’m very impressed; there’s just so much to like.

The thing I’d like to do is integrate Ember into an existing site — on a widget-by-widget basis if you will. From what I can see this doesn’t fit the Ember model — but I’m thinking surely it must be doable.

The closest I’ve come is this talk from the Ember London meet up http://vimeo.com/86698279 — Here you can see a technique to pull a single View from Ember using the __container__ API and attaching it the DOM with appendTo.

Is there any good way of having multiple Ember “widgets” on a single page? — Is having multiple apps feasible? (I’m wondering about the singleton nature of a lot of the classes being an issue.)

Thanks for helping me learn here!

1 Like
2

Multiple apps are feasible, you can use App.rootElement to specify where you attach an Ember app on the page. So instead of attaching to the body, you attach multiple apps to different elements. From there you can use Ember.Component and templates to create widgets.

3

Ok — thanks! I’ve had a little play and that seems to work. No doubt I’ll discover the problems as I go. :smile:

4

This is the way I approached integrating Ember into an existing large site as well! Just keep in mind if you are using separate Ember applications on the same page then you will need to namespace your templates and extend the DefaultResolver to make it aware of this. If you do not namespace your templates then any name collisions (I’m looking at you, ‘application’) will be overwritten by the last entry on the page (or in the compiled map if you are using the handlebars compiler).

var App = Em.Application.create({    
    // ...
    Resolver: Ember.DefaultResolver.extend({
        resolveTemplate: function(parsedName) {
            var namespace = 'whateverNamespace/';
            parsedName.fullNameWithoutType = namespace + parsedName.fullNameWithoutType;
            return this._super(parsedName);
        }
    }),
    // ...
});

This way you define your templates with template-name=“whateverNamespace/application” and not have to worry about collisions. And for bonus points, the above can be written as a mixin to use in your application instantiation :smile:.

5

That’s really handy! Thanks.