Открыть модальное диалоговое окно в ячейке ember-таблицы

Question

Я в своем уме, пытаясь выполнить то, что должно быть очень простым поведением: у меня есть компонент таблицы Ember (от Addepar), я хотел бы иметь внутри этой кнопки кнопки, которые запускают модальное диалоговое окно.

Так как я новичок в Ember, я начал с начального набора столов Ember jsbin, доступного здесь: http://jsbin.com/fasudiki/9/edit

Я добавил пользовательский вид ячеек, чтобы использовать свой собственный шаблон:

  columns: function() {
    var firstColumn;
    firstColumn = Ember.Table.ColumnDefinition.create({
      columnWidth: 350,
      textAlign: 'text-align-right',
      headerCellName: 'Column 1',
      tableCellViewClass: 'App.EmberTableMyCustomCell',
      getCellContent: function(row) {
        return row.get('myRandomValue').toFixed(2);
      }
    });

    return [firstColumn];
  }.property(),

с

App.EmberTableMyCustomCell = Ember.Table.TableCell.extend({
    templateName: 'custom-table-cell',
    classNames: 'custom-table-cell'
});

а также

<script type="text/x-handlebars" data-template-name="custom-table-cell">
    <span class="ember-table-content">
    {{ view.cellContent}}
    <button {{action 'openModal' 'modal'}}>This one doesn't</button>
    <button {{action 'myCellAction' 'modal'}}>This one doesn't either</button>
    </span>
</script>

Затем я попытался следовать официальному руководству Ember для модальных диалогов: http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/

В терминологии Ember я хотел бы иметь возможность запускать действие на маршруте Index из компонента ember-table.

Я попытался вызвать действие непосредственно из шаблона, который не работал:

<button {{action 'openModal' 'modal'}} >Open modal</button>

Затем я попробовал то, что предлагается в руководстве "Отправка действий из компонентов в ваше приложение": http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/

создавая карту "действий" на App.EmberTableMyCustomCell просмотреть, а затем использовать оба

  this.send('openModal', 'modal');

а также

  this.sendAction('openModal', 'modal');

Опять безуспешно.

Затем я попробовал то, что рекомендуется в этом вопросе: компонент Ember sendAction() не работает

установив имя действия в пользовательском атрибуте в моей ember-таблице и используя его в параметре для triggerAction(...), используя:

<div class="table-container">
  {{table-component
    hasFooter=false
    columnsBinding="columns"
    contentBinding="content"
    myCustomActionName="openModal"
  }}
</div>

а также

  actions : {
    myCellAction : function () {
      this.triggerAction('myCustomActionName', 'modal');
    }
  }

Опять безуспешно.

Есть идеи, что я делаю не так?

Я поместил код в jsbin: http://jsbin.com/yovikaviseve/2/edit

Answer 1

Я считаю, что (к сожалению) ваши действия в App.EmberTableMyCustomCell не вызывается. Я не уверен, что это лучшее решение, но я смог обойти проблему, расширив Ember.Table.EmberTableComponent и определение моего действия там. После того как действие было вызвано, я смог использовать метод из вашего связанного поста SO, чтобы распространить действие на ApplicationController,

Я фактически отправил основное действие вместо этого, чтобы сделать вещи немного проще, как описано здесь: http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/.

Вот рабочий пример: http://emberjs.jsbin.com/yemebu/3/edit.

Спасибо, что включили JS Bin - мне стало намного проще взглянуть. Дайте мне знать, если у вас есть еще вопросы или этот подход не работает для вас!