Ember:组件中的sendAction不起作用

时间:2014-09-12 19:30:56

标签: ember.js coffeescript

在一个组件中,我有一个返回主屏幕的按钮。当我点击它时sendAction似乎没有发射。我希望它将行动发送到路线行动:

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'
)

成分:

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

模板:

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

我进入了&#39;回击&#39;消息,但页面不会更改。说实话,这可能是this question的重复,我只是没有好好回答。

完整模板:

<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>

1 个答案:

答案 0 :(得分:6)

事实证明,我需要在调用组件的模板中注册操作。

automobile.handlebars之前:

{{automobile-details model=content}}

{{outlet}}

automobile.handlebars之后:

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

{{outlet}}