从成员表单元格中打开模式对话框

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

我尝试直接从模板触发操作，但没有成功：

<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');

同样，没有成功。

然后，我尝试了这个SO问题中的建议：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，让我更容易看一看。如果你还有更多问题，或者这种方法对你不起作用，请告诉我！