CODEWITHSUNDEEP
ember.js
konapun
konapun

Reputation: 199

Ember.js embed one view in another without altering the route

I'm trying to create something like a carousel in Ember, where the current item shown is controlled by one of four buttons on the page (for simplicity's sake, I'm only showing two buttons). I'm currently implementing this using outlets and routes, but I'd much prefer to have I have this work without altering the route. Here's how I'm currently going about this:

<!-- index.hbs (snipped, simplified) -->
<div>
  {{outlet highlights}}
</div>
<!-- buttons for controlling outlet content (only showing 2 for now) -->
<div>
  <a class="button" href="#" {{action "showHighlight" "placeholder1"}}>
    Highlight 1
  </a>
  <a class="figcaption" href="#" {{action "showHighlight" "placeholder2"}}>
    Highlight 2
  </a>
</div>

My index controller handles the action that's called when the buttons are pressed:

App.IndexController = Ember.ArrayController.extend({
  highlights: ['placeholder1', 'placeholder2'],

  actions: {
    showHighlight: function(highlight) { // render a new view into 
      this.transitionToRoute('/highlights/' + highlight);
    }
  }
});

My routes for the highlights:

App.Router.map(function() {
  this.resource('highlights', function() {
    this.route('placeholder1', { path: '/placeholder1' });
    this.route('placeholder2', { path: '/placeholder2' });
    this.route('placeholder3', { path: '/placeholder3' });
    this.route('placeholder4', { path: '/placeholder4' });
  });
});

For each placeholder route:

App.Placeholder1Route = Ember.Route.extend({
  renderTemplate: function() {
    this.render({
      into: 'index',
      outlet: 'highlights'
    });
  }
});

Is there a better way to do this, without having to use routes?

Upvotes: 0

Views: 90

Answers (1)

konapun
konapun

Reputation: 199

I ended up solving this by handling the action in the route and choosing the proper template to render:

App.IndexRoute = Ember.Route.extend({
  actions: {
    showHighlight: function(name) {
      var highlightTemplate = 'highlight_' + name;
      this.render(highlightTemplate, {
        into: 'index',
        outlet: 'highlights'
      }
    }
  }
});

Using this technique, you don't need to specify any routes for the highlights and you don't need an IndexController (unless you want one for handling other events).

Upvotes: 1

Related Questions