CODEWITHSUNDEEP
ember.js
Amiel Martin
Amiel Martin

Reputation: 4814

Render a template with model outside of rootElement with Ember.js

I am adding Ember.js to an existing rails application and am using the rootElement option when creating my Ember.Application.

There are a couple places outside of this rootElement where I would like to insert a small ember template bound to a simple Ember.Object model.

I've created a jsfiddle with an example that I hope makes what I'm looking for clear: http://jsfiddle.net/amiel/x9fCz/2/

What is the best way to do this?

Upvotes: 0

Views: 696

Answers (2)

Marc
Marc

Reputation: 2584

To prevent the DEPRECATION: Using the defaultContainer is no longer supported message, you'd have to create a childView within the ApplicationView#didInsertElement.

App.ApplicationView = Ember.View.extend({
    didInsertElement: function() {
        var view = this.createChildView(App.ClockView);
        view.replaceIn('#now');
    }
});

The App.ClockView#controller will now be the App.ApplicationController as well.

Upvotes: 1

Amiel Martin
Amiel Martin

Reputation: 4814

I created a new ember view, with the template name matching my handlebars template. Then instantiated it in an ember initializer.

Ember.Application.initializer({
  name: "clock_view",
  initialize: function(container, application) {
    var view = App.ClockView.create();
    view.replaceIn('#now');
  }
});

See full example on jsfiddle: http://jsfiddle.net/amiel/2FsxA/1/

I'm not going to accept my own answer just yet to see if anyone else has a better way to do this.

UPDATE: Here's another possible solution: http://jsfiddle.net/amiel/2FsxA/3/

TL;DR:

App.ApplicationRoute = Ember.Route.extend({
    setupController: function(controller, model) {
        this.setupClock();
        this._super(controller, model);
    },
    setupClock: function() {
        var view = App.ClockView.create();
        view.replaceIn('#now');
    }
});

Upvotes: 1

Related Questions