javascript - 事件/类设计模式(原型(prototype))

Question

我以前遇到过这个问题，我需要比我更聪明的人的帮助!

如何将元素的事件附加到类的方法？更具体地说，同一个类(class)？有更好的办法吗？

使用 Qt 小部件样式方法，我一直在尝试在 JavaScript 中创建独立的“小部件”对象。我正在使用 Prototype javascript 框架并将我的小部件构建为一个类。然后，使用 Event.observe，我尝试将事件附加到该类的方法。但是事件分配会解除分配方法的绑定(bind)。下面是我尝试构建的一个简单表格的示例，该表格具有可单击的列标题:

 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”方法的第二个参数是将函数绑定(bind)到的对象，因此您可以这样做:

array.each(someFunction, this);

而不是

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