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

我对Prototype不太熟悉，但是this在respondToClick事件处理程序中引用了什么？如果我不得不猜测，我会说它引用了点击的DOM元素，而不是你想要的对象实例。

也许您可以将网格分配给DOM元素的属性，并在respondToClick函数中重用该属性，如：

myDOMElement.someProperty = grid;

//and later

this.somePropery.sortColumnAsc(columnName);

事件/类设计模式（原型）

2 个答案: