Backbone.js和jquery将click事件绑定到视图函数

Question

我正在使用骨干.js这是我的情况

可以说我有一个名为FooView

class FooView extends Backbone.view

  initialize:->
    $('#manage-foo').bind('click', @render)

  render: ->
    //whatever I want to render

我想绑定元素＃manage-foo上的单击以呈现我的视图或调用我的视图FooView的函数，但是我不想丢失调用该函数的上下文，应该使用this指针来调用函数render。到FooView而不是元素。如何实现此目的。 ？

我遇到的情况是，我在pageLoad上创建了FooView，并且在单击Give元素时必须显示它。

谢谢

Answer 1

不知道这是否能100％回答您的问题，但_.bindAll(this, 'render'); 解决上下文丢失的问题。 您可以添加需要使用的所有方法，因此可以_.bindAll(this, 'render,click'); 并添加点击方法。

http://arturadib.com/hello-backbonejs/docs/1.html

Answer 2

那里的bind方法用于将方法绑定到上下文，而不是注册事件处理程序。

您应该尝试的是：

class FooView extends Backbone.View
  events:
    "click #manage-foo": "render"  
     # this registers @render as the event handler for clicking on the #manage-foo element in the view

  render: ->
    # your rendering code

感谢Trevor（在评论中）指出，您不再需要使用_.bindAll绑定事件对象中定义的事件的上下文。 （更新了代码以反映这一点）

事件对象中定义的任何事件处理程序都将在FooView上下文中自动执行。

Answer 3

如果#manage-foo是你的孩子FooView的@el那么你可以使用骨干的事件系统：

class FooView extends Backbone.View
  events:
    'click #manage-foo': 'render'
  #...

如果#manage-foo不在视图的元素内，则events将不起作用，因为事件处理基于jQuery的delegate ，并且delegate调用已附加到视图的@el 。 在这种情况下，你应该定义render与脂肪箭头（ => ，以确保它始终拥有正确this调用时：

render: =>
  #...

您还需要在视图中进行remove ，以避免泄漏对视图的引用：

remove: ->
  $('#manage-foo').off('click', @render)
  Backbone.View::remove.apply(@)