Ember 将多个动作生成到组件中

gos*_*eti 3 javascript ember.js

我有一个checkout-form具有像一些动作成分nextprevioussubmitFormselectDate。目前我只能执行这样yieldselectDate操作:

{{!-- checkout-form.js --}}
<div class='checkout-form'>
  {{yield (action 'selectDate')}}
</div>
Run Code Online (Sandbox Code Playgroud)

我希望能够checkout-form像这样使用我的组件:

{{!-- order.hbs --}}
{{#checkout-form as |submitForm, selectDate|}} 
  {{checkout-field placeholder="Full Name" value=model.order.name}}
  {{!-- another field component that uses selectDate --}}
  {{checkout-form-actions action=submitForm}}
{{/checkout-form}}
Run Code Online (Sandbox Code Playgroud)

我将如何产生要在我的内部使用的多个操作checkout-form.hbs

Emb*_*eak 5

选项 1.您可以传递许多参数,如下所示

{{yield (action 'selectDate') (action 'submitForm')}}
Run Code Online (Sandbox Code Playgroud)

阅读 - https://guides.emberjs.com/v2.14.0/components/block-params/

{{!-- order.hbs --}}
{{#checkout-form as |selectDate, submitForm|}} 
  {{checkout-form-actions action=selectDate}}
  {{checkout-form-actions action=submitForm}}
{{/checkout-form}}
Run Code Online (Sandbox Code Playgroud)

选项 2.您还可以使用hash helper

{{yield (hash 
        selectDate=(action 'selectDate')
        submitForm=(action 'submitForm')) }}
Run Code Online (Sandbox Code Playgroud)

{{#checkout-form as |options|}}   
  {{checkout-form-actions action=options.submitForm}}
{{/checkout-form}}
Run Code Online (Sandbox Code Playgroud)