ember.js - Ember.js - アクションがパラメーターを受け取らない

Question

Ember アプリ内に次のものがあります。

テンプレート：

...

<tr id="court-tpl">
    <td class="name">
        <input class="court-name" type="text" size="3" maxlength="3">
    </td>   
    <td class="placement">
        <select class="court-placement">
            <option selected="selected" value="0">Exterior</option>
            <option value="1">Indoor</option>
        </select>
    </td>
    <td class="material">
        <select class="court-material">
            <option value="0">Muro</option>
            <option selected="selected" value="1">Cristal</option>
        </select>
    </td>
    <td class="single">
        <select class="court-single">
            <option value="0" selected="selected">No</option>
            <option value="1">Sí</option>
        </select>
    </td>
    <td>
        <button {{action "deleteCourtRow" target="view" on="click"}} class="btn btn-small"><i class="icon-remove"></i> Eliminar</button>
    </td>
</tr>

...

対応するビュー:

var ClubCourtsView = Ember.View.extend({
    ...

    deleteCourtRow: function(event) {
        console.log(event);
    }

    ...
}); 

ボタンをクリックすると、コンソール出力はundefined. <tr>インラインフォームを含む要素を削除するために、event.target を取得しようとしています。

何が起こっているのか分かりますか？

編集

コントローラ：

    var ClubCourtsController = Ember.Controller.extend({
    needs: ['currentClub'],
    content: null,
    addingCourts: false,

    userCanAddCourts: function() {
        if (this.get('addingCourts') || this.get('hasCustomCourts'))
            return true;

        return false;
    }.observes('addingCourts', 'hasCustomCourts'),

    hasCustomCourts: function() {
        if (this.content.get('customCourts').get('length') > 0)
            return true;

        return false;
    }.property('customCourts'),

    saveCourts: function(data) {
        // Scope reference
        var that = this;

        // Create a record for each row
        $.each(data, function(i) {
                var elId = data[0].elId;

                var r = App.CustomCourt.createRecord();
                r.set('name', data[0].name);
                r.set('single', data[0].single);
                r.set('crystal', data[0].crystal);
                r.set('indoor', data[0].indoor);
                r.set('club', that.content);

                // Remove this row form when model is saved, 
                // as the table is watching for new courts automatically
                r.one('didCreate', function() {
                    $('#' + elId).fadeOut('fast');
                });
        });

        // Send new courts to back-end and update clubmeta: enable custom courts
        this.content.get('clubmeta').set('customCourtsEnabled', true);
        this.store.commit();
    },

    deleteCourt: function(court) {
        court.deleteRecord();
        court.get('transaction').commit();
    }


});

module.exports = ClubCourtsController;

問題は、テーブルには 2 種類の行があることです。既存のレコード (コート) を表示する行と、フォームを作成するためのフォームを表示する行です。クラブには多くのコートがある場合があるため、列を動的に追加するボタンがあります。

既存の行の削除ボタンはCustomCourt、データベースからレコードを削除します。これはコントローラーの で行われますdeleteCourt()。

質問が向かうフォーム行の削除ボタンは、ビュー内の HTML 要素のみを削除する必要があるため、ビュー関数を使用していますdeleteCourtRow()。これらの行のモデルは、保存ボタンが押されたときにのみ作成されます ( のループを参照saveCourts())。

http://i.stack.imgur.com/nMj4l.png

とにかく、私は Ember を使用する完全な初心者であるため、別のアプローチをお勧めします。