事件/類設計模式（原型）

Question

我以前曾對此提出質疑，我需要比我更聰明的人的幫助！

如何將元素的事件附加到類的方法上？ 更具體地說，同一個班級？ 有沒有更好的辦法？

我一直在嘗試使用Qt小部件樣式方法在javascript中創建獨立的“小部件”對象。 我正在使用Prototype javascript框架並將我的小部件構建為類。 然后，使用Event.observe，我嘗試將事件附加到類的方法上。 但是事件分配取消了分配的方法的綁定。 這是我嘗試構建的具有可點擊列標題的簡單表的示例：

 Objectify.Grid.Table = Class.create({
    initialize: function(headers) {
        this.columns = headers;
        this.rows = [];
    }, 
    addRow: function(GridData) {
        var len = this.rows.push(GridData);
        return len-1;
    },
    getRow: function(rowIndex) {
        return this.rows[rowIndex];
    },
    build: function(parent) {
        this.mainTable = new Element('table',{'class':'Objectify-Grid'});
        $(parent).update(this.mainTable);

        var tableBody = new Element('tbody',{});
        this.mainTable.update(tableBody);

            var headerRow = new Element('tr',{'class':'Objectify-Grid-header-row'});
            tableBody.update(headerRow);

                this.columns.each(function(val,id) {
                    var hcell = new Element('td',{'class':'Objectify-Grid-header-cell'}).update(val);
                    headerRow.insert(hcell);
                    // EVENT ASSIGNMENT //
                    hcell.observe('click',this.respondToClick);
                    /////////////////////
                }.bind(this));

            this.rows.each(function(GridData,id) {
                var row = new Element('tr',{'class':'Objectify-Grid-row','id':'Objectify-Grid-row'+id});
                tableBody.insert(row);

                    this.columns.each(function(columnName,index) {
                        var cell = new Element('td',{'class':'Objectify-Grid-cell'}).update(GridData.getValue(columnName));
                        row.insert(cell);
                    });

            }.bind(this));
    },
    // RECEIVING METHOD //
    respondToClick: function(event) {
        var columnName = event.element().innerHTML;
        // "this" is no longer bound in this method
        this.sortColumnAsc(columnName); // [ERROR]
    }
});

Answer 1

我認為您應該這樣做：

hcell.observe('click',this.respondToClick.bindAsEventListener(this));

而“ each”方法的第二個參數是將函數綁定到的對象，因此您可以執行以下操作：

array.each(someFunction, this);

代替

array.each(someFunction.bind(this));

Answer 2

我不是太熟悉的原型，但到底是什么this是指在respondToClick事件處理程序？ 如果我不得不猜測，我會說它指的是單擊的DOM元素，而不是您想要的對象實例。

也許您可以將網格分配給DOM元素的屬性，然后在responseToClick函數期間重用該屬性，如下所示：

myDOMElement.someProperty = grid;

//and later

this.somePropery.sortColumnAsc(columnName);