Соединение bs-кнопок в bs-форме с действиями компонента (ember-bootstrap)

Question

Как правильно подключить bs-button внутри bs-form к действию компонента?

---

Немного предыстории о том, что я хочу сделать и уже попробовал:

Я нахожусь в процессе обновления Ember с 2.10 до 2.14 и ember-bootstrap с 0.11.3 до 1.0. Я столкнулся с проблемой с ember-bootstrap.

У меня две кнопки в форме (bs-form): "Сохранить" и "Отмена". Форма размещена в компоненте Ember. В старой версии у меня просто было два bs-button элементы, как это:

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

В классе компонентов я определил соответствующее действие:

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

Теперь это больше не работает: bs-button использования onClick вместо action сейчас, но просто добавив onClick="save" не работает (получаю TypeError: action is not a function); также, onClick=(action "save") не работает (Assertion Failed: An action named 'save' was not found in (generated edit-organization controller)).

Однако, когда не используется bs-button но нормальный button элемент в сочетании с action помощник, все работает просто отлично

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

Я подозреваю, что проблема связана с использованием компонента для размещения формы; в конце концов, документы ember-bootstrap утверждают, что действия используются для...

отправить действие на ваш контроллер.

Тем не менее, я хотел бы использовать компонент (в конце концов, контроллеры уходят, верно?). Любая помощь по этому вопросу приветствуется.

Answer 1

Вы можете создать закрывающее действие и передать его компоненту bs-button.

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

Внутри компонента,

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