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