Cannot read property 'container' of null when using linkTo helper in an Ember template

Question

I am creating an Ember application as an add-on to some HTML returned from the server. I need this HTML so that the site can be indexed by search engines, and also to speed up the initial page rendering for the users.

So my application consists of several Ember Views, appended to different DOM elements of the HTML generated by the server. I don't use master templates for routes, so I set renderTemplate function of each route to do nothing.

My Ember App is bound to body element and I can successfully append a custom view to an element down the tree. It works:

In this JSFiddle three last elements of the list are appended by Ember

But when I try to use linkTo helper in my template, I hit an error:

Uncaught TypeError: Cannot read property 'container' of null ember-latest.js:32224

which is in this function:

router: Ember.computed(function() {
     return get(this, 'controller').container.lookup('router:main');
}),

In this JS fiddle I just add linkTo to the template, and it breaks everything

1. In general, can Ember work this way - having many Views scattered over the HTML rendered by the server?
2. How can the example code be fixed?

Answer 1

I've fixed your fiddle here, Check it out.

Seems like you are starter to Ember,
So here are some tips for you,

1. You should have an application template, which will be the root template and on which all the templates will be rendered.
2. You shouldn't access views using this.container.lookup, that is for debugging only.
3. You shouldn't append views to the DOM, it's the job of the framework to do.
4. By default your application will be appended to the body of the html, if you want it to be appended elsewhere, give the rootElement property when creating the application. Refer here for configuring your application.
   

   The rootElement can be either a DOM element or a jQuery-compatible selector string. Note that views appended to the DOM outside the root element will not receive events. If you specify a custom root element, make sure you only append views inside it!

5. Don't access any controllers globally like App.itemsController.set("content", model), if you want to access another controller inside a route, use this.controllerFor, and to access inside another controller, use needs.
6. You need not create any controller instance like App.itemsController=Ember.ArrayController.extend({}).create();
   The framework will take care of all these.

Answer 2

I found that I need to additionally bind the view and the container together to make this fiddle work

  App.itemsView.set("controller", App.itemsController);
  App.itemsController.set("container", this.container);

So the resulting working code snippet is here: http://jsfiddle.net/ddegtyarev/6cBRx/6/

Again, let me reiterate that I'm building an hybrid Ember application - i.e. I have some HTML returned right from the server, and some appended by multiple Ember views in multiple places. This is why I have to manually create the views and bind them with controllers etc.