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

Open modal dialog from within ember-table cell

本文关键字:模式 对话框 成员 表单 单元格      更新时间:2023-09-26

我已经无计可施了,正试图完成一个应该非常简单的行为:我有一个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

我相信(不幸的是)您在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,让我更容易看一看。如果你还有更多问题,或者这种方法对你不起作用,请告诉我!