jquery $(this) 不适用于 CoffeeScript 和 Backbone

Question

$(this) 不适用于 cofeescript 和backbone。它生成有效的代码，但我不明白为什么它不起作用。为了解决这个问题，我使用了 $(event.target)。

Jobmatch.Views.Jobs ||= {}

class Jobmatch.Views.Jobs.JobView extends Backbone.View
template: JST["recommendation/templates/jobs/job"]

initialize: () ->
  @ajs = new Jobmatch.Collections.ApplicantJobsCollection()
  @ajs.reset(@options.applicant_jobs || [])
  @aj = new @ajs.model()
  @index = @options.index || 0

events:
  "click .job_apply" : "apply"

tagName: "tr"

apply: (event)->
   target = $(this) // As this is not working as I expected,So I used below line.
   target = $(event.target) 
   if @options.user_jobmatch_valid
     @ajs.create({job_id: @model.get('id') })
     target.parents("a.job_apply").prev().click();
   else
    target.parents("a.job_apply").next().click();
   false


render: ->
  $(this.el).html(@template(@model.toJSON()))
@ 

这个 cofeescript 生成了以下代码：

JobView.prototype.apply = function(event) { 
  var target; target = $(this); // not working it is not elementt object
      target =   $(event.target);// this is element object ,working fine    
      target.parents("a.job_apply").prev().click(); 
}; 

Answer 1

在主干文档中，http://backbonejs.org/#View-delegateEvents
它明确指出：

所有附加的回调在传递之前都绑定到视图
到 jQuery，所以当调用回调时，this 继续引用
到视图对象。

这解决了许多面向对象程序员在使用 jQuery 时遇到的问题之一，即它会覆盖所有事件处理程序中的上下文。如前所述，您经常可以使用事件，该事件作为处理程序的参数传递。但是，event.target 通常可以引用子元素，而不是 this，后者始终引用通过查询选择的元素。例如：

<a href="#"><b>my link</b></a>

$('a').on('click', myfunction); function myfunction(event) {
    this // refers to the "a" element
    event.target // refers to the "b" element 
}

在这些情况下，当使用 Backbone 将鼠标事件附加到具有子元素的元素时，请使用 event.currentTarget 来获取对事件处理程序附加到的元素的引用。

events: { 
  "click a" : "myFunction" }, 
...
function myFunction(event) {
  var $this = $(event.currentTarget);
  // Now, $this is the same as jQuery's $(this)
}

Answer 2

这一切都取决于上下文，

this 在某些情况下绑定到您的视图本身，
举个例子：

var myView = Backbone.View.extend({
    events: { "click a" : "myfunction" },
    initialize: function(){
        _.bindAll(this, 'render', 'myfunction');
    },
    render: function(){
        // rendering data here...
    },
    myfunction: function(e){
        console.log(e.target); // will log the clicked DOM element => <a>
        console.log(this);  // will log the view => myView
    }

});

window.v = new myView({ el : $('#mydiv') });
window.v.render();

正如你所看到的，如果你应该运行这个例子，你可以看到 this 和 e.target 之间的区别。然而，这都是由于初始化方法中的关键线造成的。

_.bindAll(this, 'methodname', [ methodnames ] );

当使用给定方法之一时，this 将视图绑定到 this 。
如果您要从该列表中删除 myfunction，console.log(this); 将记录该元素本身。
但是，您将无法从您的视图中访问数据或函数......
您可以自由选择是否将视图绑定到 this。

Answer 3

对于通过 Backbone 视图绑定的事件，this 将设置为视图本身。这与普通 jQuery 不同，其中 this 引用 DOM 元素

，因此在 Backbone 视图中：

events: { "click a" : "myfunction" },
...
function myfunction(e) {
    this // refers to the view
    e.target // refers to the element
}

而在普通 jQuery 中：

$('a').on('click', myfunction);
...
function myfunction() {
    this // refers to the element
    e.target // also refers to the element
}

在这两种情况下，您都可以使用 e.target 来引用到元素