gosseti gosseti - 3 years ago 183
Javascript Question

Ember yield multiple actions into component

I have a

checkout-form
component which has some actions like
next
,
previous
,
submitForm
and
selectDate
. Currently I’m only able to
yield
the
selectDate
action like this:

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


I’d like to be able to use my
checkout-form
component like this:

{{!-- 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}}


How would I go about yielding multiple actions to be used inside of my
checkout-form.hbs
?

Answer Source

option 1. You can pass many arguments like below

{{yield (action 'selectDate') (action 'submitForm')}}

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

option 2. You can also use hash helper,

{{yield (hash 
        selectDate=(action 'selectDate')
        submitForm=(action 'submitForm')) }}

and

{{#checkout-form as |options|}}   
  {{checkout-form-actions action=options.submitForm}}
{{/checkout-form}}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download