CODEWITHSUNDEEP
ember.js
nightire
nightire

Reputation: 1371

Ember.js: What's the difference between using {{render}} helper in template and renderTemplate hook in route

I am creating an application with complex layout recently, so I'm trying to find an elegant way to use lots of template and make them work as I wish to.

For a start, I have some UI components to fit in, these components has no relation with models and no need to use routes to manage states, so I use {{render}} helper to do something like:

<script type="text/x-handlebars">
  <div class="wrapper">
    {{render component_1}}
    {{render component_2}}

    <div class="main">
      {{outlet}}
    </div>
  </div>
</script>

This way works, but honestly I don't know anything about renderTemplate method before I've done this. After few days, I try this instead:

<script type="text/x-handlebars">
  <div class="wrapper">
    {{outlet component_1}}
    {{outlet component_2}}

    <div class="main">
      {{outlet main}}
    </div>
  </div>
</script>

and add extra codes in route:

MyApp.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render();
    this.render('component_1', {
      outlet: 'component_1',
      into: 'application'
    });
    this.render('component_2', {
      outlet: 'component_2',
      into: 'application'
    });
  }
});

then I got same results.

Now, I'm struggling to make a choice between these two methods. I prefer to first one because I think these UI components will never use routes since they don't have any states, so it's not necessary to write extra codes in ApplicationRoute. But there're two concerns still:

  1. Every related tutorial use the latter one, I don't have enough confidence to use {{render}}.
  2. MORE IMPORTANTLY: I can't predict further changes about my application, I don't know which one will be more flexible to fit changes, or give me more extensibility.

So I need some explanations and suggestions in order to use {{render}} and renderTemplate wisely, thanks for any helps.

Upvotes: 3

Views: 1329

Answers (1)

ulisesrmzroche
ulisesrmzroche

Reputation: 145

If they are components, and not full-fledged routes, just use render in your template.

{{render}} uses the same named controller and template in the current context. So that would mean it grabs the context from the current route. If a view class with the same name exists, it uses that view class. If a model is specified, it becomes the model for that controller. Default target will be that same controller.

Upvotes: 1

Related Questions