4

我在试图完成应该非常简单的行为时束手无策：我有一个 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>

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

通过在视图上创建一个“动作”地图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

4

1 回答 1

0

我相信（不幸的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 - 让我更容易看一看。如果您有更多问题或者这种方法对您不起作用，请告诉我！

于 2014-09-11T18:29:35.483 回答