Ember template displayed twice

Question

There is a simple ember.js app with one view displayed in a particular place on the webpage. Have a look at this jsfiddle: http://jsfiddle.net/jkkK3/9/

App = Ember.Application.create({

  ready: function(){
      this._super();
      this.ApplicationView.create().appendTo(".content");
  },

  ApplicationController: Ember.Controller.extend({
  }),

  ApplicationView: Ember.View.extend({
    templateName: 'application'
  }),

  Router: Ember.Router.extend({
    root: Ember.Route.extend({  
    })
  })
});

My question is: Why is the "some content here" element displayed twice? It works when I remove the router, but that's exactly what I cannot do, since I try to add Router to my Ember app. Could you please help me to display application view only once, inside the red box?

Answer 1

When using router, applicationController/view are used by default. In your ready method you append it explicitly. So 'application' template is appended twice. Remove appending it in ready method and it will be appended only once.

By default it's appended to body but if you want to override use rootElement property of Ember.Application

Ember.Application.create( {
    rootElement : '.content',
    ....
})