Linking Ember controllers to views/elements

Question

I'm new to Ember, come from an Angular background. Let's say I have an number of elements, each of which holds a different data.

#elem1 10

#elem2 20

#elem3 30

I want to bind each of these elements individually to Ember models/controllers that hold the data. So something like:

script(type="text/x-handlebars", data-template-name="elem1").
  {{data}}

App.Elem1Controller = Ember.ObjectController.extend({
  data: 10
});

This should be really easy... but I'm having a hard time navigating through all the different naming conventions and routing/terminology of Ember. How can I go about doing this?

Answer 1

The first thing to determine is which route and controller is associated with your view and then wire up the components accordingly.

Here is a simple example in a JSBin.

This one uses a separate controller and route for the three properties. And they are rendered into the application outlet when the link is clicked.

If you need to use multiple controllers then you can include them in the controller that is associated with your view by using the "needs" dependency injection.

Here is another one that just uses the application template and associated controllers etc.

It also shows how you can include controllers in other controllers which might be more what you are looking for. It also shows you how to reference them in the template.