twitter-flight - 在 $.each 循环内触发事件

Question

我有一个数据组件，它通过 ajax 检索一个数组对象并将其发送到 ui 组件进行显示。可能的方法是遍历 data 组件内的数组并将每个元素发送到 ui 组件（而不是发送整个数组）。

我收到一个错误：Uncaught TypeError: undefined is not function on the line: ths.trigger('dataAdded', value); （见下文）

数据组件附加到文档。

this.handleData = function(){
      var ths = this;
        $.ajax({            
        "url": 'url',
        "type": "get",
        "dataType": "json",
        "success": function(data) {
            $.each(data, function(index, value){
                ths.trigger('dataAdded',  value);
            });
        },
        "error": function(jqXHR, status, error) {
            console.log("status:", status, "error:", error);
           // return;
      }
        });
    };

Answer 1

我敢打赌handleData，它是作为函数传递并被调用的，而不是在对象（this）上调用。在这种情况下this，var ths = this不会是你想的那样。尝试将该赋值放在函数定义之前。

var ths = this;
this.handleData = function() {
    ...
}

原因是this函数的绑定只有在你调用时才会发生obj.handleData，而不是你做这样的事情：

var myHandleFunction = obj.handleData;

myHandleFunction();  // this is NOT obj

Answer 2

添加 '.bind(this);' 到结束 $.each 大括号。

this.handleData = function(){
      $.ajax({            
        "url": 'url',
        "type": "get",
        "dataType": "json",
        "success": function(data) {
            $.each(data, function(index, value){
                this.trigger('dataAdded',  value);
            }.bind(this);
        },
        "error": function(jqXHR, status, error) {
            console.log("status:", status, "error:", error);
           // return;
      }
        });
    };

...

this.after('initialize', function() {

}