CODEWITHSUNDEEP
ember.jsember-cli
szsoppa
szsoppa

Reputation: 113

Dynamic navigation bar in ember.js with different routes

I'm trying to create a dynamic navigation bar in ember. I have a partial header included in application template which have an element 'search' that should be only visible when I get to my events index route. I have tried to do that this way: 

ApplicationController = Ember.Controller.extend(
  eventsIndexController: Ember.inject.controller 'events/index'
  isSearchActive: Ember.computed 'eventsIndexController.showSearch', ->
    @get 'eventsIndexController.showSearch'

And in events index controller: 

EventsIndexController = Ember.Controller.extend(
  showSearch: false

When it gets to events index route

EventsIndexRoute = Ember.Route.extend(
  model: ...

  setupController: (controller, model) ->
    controller.set('model', model)
    controller.set('showSearch', true)
  deactivate: ->
    @controllerFor('events.index').set('showSearch', false)

And it works fine - model is set properly and search option is only visible in events index route. The problem is that I would like to perform some action when search is clicked but since this action is declared in EventsIndexController I can't call it in normal way from application template. So my first question is:

And second question is:

Upvotes: 0

Views: 461

Answers (1)

digitalbreed
digitalbreed

Reputation: 4070

Since you have already injected your EventsIndexController into the ApplicationController, you can handle the search click there and then trigger the desired action on the injected controller using the send method.

ApplicationController = Ember.Controller.extend({
    eventsIndexController: Ember.inject.controller('events/index'),
    actions: {
        searchClicked: function() {
            this.get('eventsIndexController').send('searchClicked');
        }
    }
});

Alternatively, you can directly invoke a method on the injected controller.

Upvotes: 1

Related Questions