javascript - 从 ember-table 单元格中打开模态对话框

Question

我已经无计可施，试图完成本应非常简单的行为:我有一个 Ember 表格组件(来自 Addepar)，我希望在该表格中包含触发模态对话框的按钮。

由于我是 Ember 的新手，所以我从此处提供的 Ember table starter kit jsbin 开始:http://jsbin.com/fasudiki/9/edit

我添加了一个自定义单元格 View ，因此我可以使用我自己的模板:

  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 术语中，我希望能够从 ember-table 组件中触发对 Index 路由的操作。

我尝试直接从无效的模板触发操作:

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

然后我尝试了“将操作从组件发送到您的应用程序”指南中的建议: http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/

通过在 App.EmberTableMyCustomCell View 上创建一个“ Action ”映射，然后同时使用两者

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

和

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

同样，没有成功。

然后我尝试了这个 SO 问题中的建议: Ember component sendAction() not working

通过在我的 ember-table 上的自定义属性中设置 Action 名称，并在 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 - 让我更容易看一看。如果您有更多问题或此方法不适合您，请告诉我!