CODEWITHSUNDEEP
ember.js
Juan Rada
Juan Rada

Reputation: 3766

Ember component actions and properties biding

I have created multiple ember component with event and properties.

my-component.hbs

 <div>
  <button type="button" {{action 'ok'}}>{{accept-text}}</button>
 </div>

when I reuse this component (they are more complex) I found myself biding the component actions to controller actions in kind of repetitive code. (The example beloow bind component ok to controller ok).

{{#my-component accept-text='Ok' ok='ok' }}
// Custom code
{{/my-component}}

My questions is: Is there anyway in ember to bind the component action to specific controller action matching by name if is not declared on the template?. The example does not look bad. But it is. when you have several actions declared.

Upvotes: 0

Views: 77

Answers (2)

benzo
benzo

Reputation: 160

if you need to pass in that many actions into a component, you may want to consider a design refactor. but if you really need to accomplish sending an entire list of a controller's actions into several components, you could just pass in the controller itself like this (assuming the component is declared within the controller's handlebars file):

{{#my-component accept-text='Ok' controller=this }}
// Custom code
{{/my-component}}

Then in the component actions do this:

actions: {
    ok: function()
    {
        this.sendAction(this.get('controller.ok'));
    }
}

this would accomplish the minimal component handlebars declaration you seek.

Upvotes: 1

aceofspades
aceofspades

Reputation: 7586

Declare the default in the component, which will be overridden if you specify it in the instantiation.

MyComponent = Ember.Component.extend({
  action: 'ok'
});

Upvotes: 1

Related Questions