Mapping my views to my EmberJS App

Question

Bonjour !

I just started learning EmberJS framework concepts, and I'm a little bit lost. I will try to be as clear as possible.

I integrated Ember in my Rails application with the ember-rails gem. In my test Rails application, I manage a collection of articles.

The ember-rails setup created a bunch of folders for templates, controllers, views and stuff.

I had an article page that displays contents of my article (title, description, ...). On this page, I don't want to display my article contents with HTML, I want to use Ember.

I created an application template :

<h1>My app</h1>
{{outlet}}

Then, I created the template for my article page:

<h1>{{title}}</h1>
{{description}}
...

Note that I don't want to use any routing for the moment. I just want to display my article on the page. So I bootstrapped the article JSON in my show.html.erb (in a script tag) and used a technique I found to store it and retrieve it.

The best thing I found to achieve this is to create an IndexRoute.

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    this.loadPreloadedVarInController(controller, 'currentArticle', 'article');
  },

  loadPreloadedVarInController: function(controller, storeVarName, controllerVarName){
    PreloadStore.getAndRemove(storeVarName).then(function(val){
      if (!_.isEmpty(val)) {
        controller.set(controllerVarName, val);        
      }
    });
  }
});

Still nothing appears. My article template doesn't show. So I appended to the previous controller:

  renderTemplate: function() {
    this._super();
    this.render('article');
  }

It finally shows up. My question is: I read some docs about ember views. So I would like to implement it to include helpers for my templates, manage events and handle DOM life cycle events. How could I transform what I just described to make it work ?

Kind regards