backbone.js - 似乎无法在 Coffeescript 中正确绑定(bind) Backbone 事件

Question

好的，所以我很难让事件绑定(bind)与 Coffeescript 和 Backbone 一起工作。我觉得这与我初始化所有内容的方式有关；我觉得事件委托(delegate)甚至都没有运行。

这是我的 View 代码:

$ ->
  class AppName.TitleView extends Backbone.View
    template: JST['templates/title']
    collection: new AppName.Members
    events:
      "keypress #search"      : "search",
    initialize: =>
      $('#search').keypress(@search) #doing it manually as a hack
    search: ->
      console.log('search handler call')
    render: =>
      $('#app').html(@template)
      @delegateEvents() #this doesn't seem to do anything, nor does @delegateEvents(@events)
      @

编译后看起来像这样:

(function() {
  var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
    __hasProp = Object.prototype.hasOwnProperty,
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };

  $(function() {
    AppName.TitleView = (function(_super) {

      __extends(TitleView, _super);

      function TitleView() {
        this.render = __bind(this.render, this);
        this.initialize = __bind(this.initialize, this);
        TitleView.__super__.constructor.apply(this, arguments);
      }

      TitleView.prototype.template = JST['templates/title'];

      TitleView.prototype.collection = new AppName.Members;

      TitleView.prototype.events = {
        "keypress #search": "search",
      };

      TitleView.prototype.initialize = function() {
        return $('#search').keypress(this.search);
      };


      TitleView.prototype.search = function() {

        console.log('search handler call'););
        });
      };

      TitleView.prototype.render = function() {
        $('#app').html(this.template);
        this.delegateEvents();
        return this;
      };

      return TitleView;

    })(Backbone.View);
  });

}).call(this);

AppName.TitleView 从我的路由器启动(它又由主 app.coffee 启动):

$ ->
  class AppName.Router extends Backbone.Router
    routes:
      ".*": "main"

    main: ->
      @titleView ||= new AppName.TitleView el: $('#app')[0]
      @titleView.render()

但对于我来说，我无法从 Backbone Events 中获取到 #search 的绑定(bind)。我的 hack(在代码中)只是在 initialize 函数中通过 jQuery 进行绑定(bind)。

知道发生了什么事吗？我希望这是一个简单的错字或错误的初始化。

Answer 1

View 事件绑定(bind)到 View 的 el使用 jQuery 的 on 的委托(delegate)形式.这意味着您在 View 的 events 中提到的所有内容对象必须在 View 的el 内否则事件处理程序将不会被触发。

默认情况下， View 的 el 是空的 <div> View 将创建 <div>当它需要并将事件绑定(bind)到那个<div> .您可能会注意到您没有使用 this.el或 this.$el代码中的任何地方；您的事件已正确绑定(bind)，但它们已绑定(bind)到您放入 DOM 中的任何内容，因此看起来这些事件不起作用。

两种直接的可能性出现:

1. 使用 #app作为 View 的 el :

   class AppName.TitleView extends Backbone.View
     #...
     el: '#app'
     #...
     render: =>
       @$el.html(@template)
       @
   

2. 以通常的 Backbone 方式做事并创建一个 el仅供您查看:

   class AppName.TitleView extends Backbone.View
     #...
     render: =>
       @$el.html(@template)
       @
   
   v = new AppName.TitleView
   $('#app').append(v.render().el)
   

我推荐后者，因为它更易于管理，并且可以帮助您避免将多个 View 附加到同一个 DOM 元素(以及由此产生的僵尸)。

此外，@template几乎总是一个函数，所以你想说:

$('#app').html(@template())