0

What is the correct way of connecting a bs-button inside a bs-form to a component action?

Some background on what I want to do and have already tried:

I'm in the process of upgrading Ember from 2.10 to 2.14 and ember-bootstrap from 0.11.3 to 1.0. I encountered a problem with ember-bootstrap.

I have two buttons in a form (bs-form): "Save" and "Cancel". The form is hosted in an Ember component. In the old version I just had two bs-button elements, like this:

{{bs-button defaultText="Save" type="primary" action="save"}}
{{bs-button defaultText="Cancel" type="primary" action="cancel"}}

In the component class, I defined the matching action:

actions: {
  save() { /* do saving stuff */ }
  cancel() { /* do cancelling stuff */ }
}

Now this no longer works: bs-button uses onClick instead of action now, but just adding onClick="save" does not work (I get TypeError: action is not a function); also, onClick=(action "save") does not work (Assertion Failed: An action named 'save' was not found in (generated edit-organization controller)).

However, when not using bs-button but a normal button element in conjunction with the action helper, it works just fine:

<button class="btn btn-default" {{action 'cancel'}}>Cancel</button>
<button class="btn btn-primary" {{action 'save'}}>Save</button>

I suspect the problem is related to using a component to host the form; after all, the ember-bootstrap docs state that actions are used to...

send an action to your controller.

Still I'd like to use a component (after all, controllers are going away, right?). Any help on this is appreciated.

dr_barto
  • 5,723
  • 3
  • 26
  • 47

1 Answers1

0

You can create closure action and pass it to bs-button component.

{{bs-button defaultText="Save" type="primary" save=(action "save")}}
{{bs-button defaultText="Cancel" type="primary" cancel=(action "cancel")}}

Inside the component,

<button class="btn btn-default" {{action cancel}}>Cancel</button>
<button class="btn btn-primary" {{action save}}>Save</button>
Ember Freak
  • 12,918
  • 4
  • 24
  • 54
  • If I understand correctly, your explanation is about how to fix the bs-button component. But bs-button is not my component, but it's part of the ember-bootstrap addon; so what I'm looking for is how to correctly use this addon, not how to write the functionality myself. – dr_barto Jul 17 '17 at 11:31
  • Oh Sorry. Now I understood your problem. I believe you need to define action is controller, that's the breaking change introduced in [1.0.0 alpha releases](https://github.com/kaliber5/ember-bootstrap/blob/master/CHANGELOG.md#100-alpha3-2017-01-21) . To adhere DDAU principle. I haven't used this. you can confirm this from author @simonihmig who will be active in ember slack community – Ember Freak Jul 17 '17 at 12:43