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(@)