0

In a component I have a button for going Back to the main screen. When I click on it the sendAction does not seem to fire. I expected it to send the action out to the route action:

routes.js.coffee:

App.AutomobileRoute = Ember.Route.extend(Ember.SimpleAuth.AuthenticatedRouteMixin,

  model: (params) ->
    @store.find('automobile', params.automobile_id)

  setupController: (controller, model) ->
    controller.set('content', model)
    @controllerFor('application').set('currentRoute', 'automobiles')

  actions:
    back: ->
      @transitionTo 'automobiles'
)

component:

backToAutomobiles: ->
  console.log 'Hit Back'
  response = @.sendAction 'back'
  console.log "Response: " + response

template:

<button type="button" class="btn btn-default" id='back' {{action 'backToAutomobiles' model}}>Back</button>

I get to the 'Hit Back' message but the page does not change. And to be honest this may be a duplicate of this question and I am just not following the answer well.

Full Template:

<div class="panel-group" id="automobile-details">
  <div class="panel panel-default">
    <div class="panel-heading">
      <span class="spec-title">
        <h3 class="panel-title">
          <a data-toggle="collapse" data-parent="#automobile-details" href="#automobile-details-body">
            {{model.name}}
          </a>
        </h3>
      </span>
      &nbsp;
      <span>
        {{view Em.Select content=autoModels
                         optionValuePath="content.automobileId"
                         optionLabelPath="content.modelName"
                         selection=selectedModel
        }}
          {{model.status}}
      </span>
    </div>
    <div id="automobile-details-body" class="panel-collapse collapse">
      <div class="panel-body">
        {{#if model.isPending}}
          {{partial 'automobile/form'}}
          <div class="btn-toolbar" role="toolbar">
            <button type="button" id='cancel-header' class="btn btn-default" {{action 'cancel' model}}>Cancel</button>
            <button class="btn btn-primary" id='submit-header' {{action 'submit' model}}>Update</button>
          </div>
        {{else}}
          {{partial 'automobile/header'}}
        {{/if}}
      </div>
    </div>
  </div>
</div>

<hr/>

<h3>Attributes</h3>

{{partial 'automobile_attributes/automobile_attributes'}}

<div class="btn-toolbar" role="toolbar">
    <button type="button" class="btn btn-default" id='back' {{action 'backToAutomobiles' model}}>Back</button>
    {{#if model.isPending}}
        {{#link-to "automobile.new_group" class='btn btn-primary' id='add-group'}}New Group{{/link-to}}
        {{#link-to "automobile.publish" model.id class="btn btn-success" id='publish-auto'}}Publish{{/link-to}}
    {{/if}}
    {{#unless model.isPending}}
        <button type="button" id='new-model' class="btn btn-primary" {{action 'newModel' model}}>New Model</button>
    {{/unless}}
</div>
Community
  • 1
  • 1
ScottJShea
  • 7,041
  • 11
  • 44
  • 67

1 Answers1

6

It turns out that I needed to register the action in the template calling the component.

automobile.handlebars Before:

{{automobile-details model=content}}

{{outlet}}

automobile.handlebars After:

{{automobile-details model=content back='back'}}

{{outlet}}
ScottJShea
  • 7,041
  • 11
  • 44
  • 67
  • Thanks for the tip. Was stuck on this forever! Any idea why you have to register the action when calling the component? Doesn't make sense to me (and doesn't seem to be documented in the ember docs?)... – SeeMeCode Mar 05 '15 at 05:10