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-table组件中触发对Index路径的操作。

我尝试直接从没有工作的模板触发操作：

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

然后我尝试了＆＃34;从组件发送动作到您的应用程序＆＃34;指南： http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/

创建一个＆＃39;动作＆＃39;映射App.EmberTableMyCustomCell视图，然后使用两者

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

和

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

再次，没有成功。

然后我尝试了在这个SO问题中推荐的内容： Ember component sendAction() not working

通过在我的ember-table上的自定义属性中设置操作名称，并使用以下参数在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 - 让我更容易看一看。如果您有更多问题或者这种方法对您没有帮助，请告诉我们！

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

1 个答案: