Coffeescript에서 백본 이벤트를 올바르게 바인딩 할 수없는 것 같습니다.

Question

좋아요, 그래서 저는 Coffeescript와 Backbone에서 작동하도록 이벤트 바인딩을 얻는데 어려움을 겪고 있습니다. 나는 그것이 모든 것을 초기화하는 것과 관련이 있다는 느낌을 가지고있다. 이벤트 위임이 실행되지 않는 것 같은 기분이 듭니다.

(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이 (내 라우터에서 개막되는 차례로에 의해 쫓겨된다

이

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

어떤이, 컴파일 할 때, 다음과 같은 : 여기

내보기 코드 기본 app.coffee) :

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

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

나, 바인딩 백본 이벤트에서 #search 바인딩을 가져올 수 없습니다. 내 해킹 (코드에 있음)은 initialize 함수의 jQuery를 통해 바인딩하는 것입니다.

어떤 일이 벌어지고 있는지 알 수 있습니까? 나는 이것이 단순한 오타이거나 나쁜 초기화라고 생각하고있다.

Answer 1

뷰 이벤트는 뷰의 el에 위임 형식 인 jQuery의 on을 사용하여 바인딩됩니다. 즉, 뷰의 events 오브젝트 에 언급 된 모든 것이이어야하며 뷰의 el 내에 있어야합니다. 그렇지 않으면 이벤트 핸들러가 트리거되지 않습니다. 기본적으로

는 뷰의 el 빈 <div>하고보기 <div>이가 필요로 할 때 것을 만들고 해당 <div>에 이벤트를 바인딩합니다. 코드의 어느 곳에서나 this.el 또는 this.$el을 사용하고 있지 않다는 것을 알 수 있습니다. 귀하의 이벤트가 제대로 바인딩되고 있지만 그들은 당신이 DOM에 넣어 아무것도에 바인딩되어 있으므로 이벤트가 작동하지 않는 것 같습니다.

두 즉각적인 가능성이 발생할 :

1. 사용 #app과 뷰의 el :

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

2. 그냥보기에 대한 el 물건을 평소와 백본 방법을 수행 만들 :

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

관리가 더 쉽고 동일한 DOM 요소 (및 그로부터 오는 경향이있는 좀비)에 여러 개의보기를 붙이지 않도록 도와줍니다. 당신이 말하고 싶은 있도록

또한, @template 거의 항상 함수 :

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