Question

我正在使用backbone.js这是我的方案

假设我有一个名为FooView

的视图

class FooView extends Backbone.view

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

  render: ->
    //whatever I want to render

我想绑定元素#management-foo上的点击来渲染我的视图或者调用我的视图FooView的函数但是我不想放松调用函数的上下文，应该调用函数render使用this指向FooView而不是元素如何实现此目的。？

我的情况是我在pageLoad上创建了FooView，我必须在点击一个给定元素时显示它

由于

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来绑定事件对象中定义的事件的上下文。（更新了代码以反映出来）

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

Answer 3

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

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

如果#manage-foo不在您的视图元素中，那么events将无效，因为事件处理基于jQuery的delegate并且delegate调用已附加到视图的@el。在这种情况下，您应该使用fat-arrow (=>)定义render，以确保在调用时始终具有正确的this：

render: =>
  #...

您还需要在视图中使用remove，以避免泄露对视图的引用：

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

Backbone.js和jquery绑定点击事件到视图函数

3 个答案: