Connecting bs-buttons in a bs-form to component actions (ember-bootstrap)

Question

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.

Answer 1

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>