मेरी कॉफीस्क्रिप्ट/backbone.js घटनाएं क्यों फायरिंग नहीं कर रही हैं?

Question

मैं कॉफीस्क्रिप्ट और backbone.js के साथ खुद को परिचित करने की कोशिश कर रहा हूं, और मुझे कुछ याद आना चाहिए।

यह CoffeeScript:

MyView = Backbone.View.extend 
    events: { 
    "click" : "testHandler" 
    } 

    testHandler: -> 
    console.log "click handled" 
    return false 

view = new MyView {el: $('#test_container')} 
view.render() 

निम्न JavaScript उत्पन्न करता है:

(function() { 
    var MyView, view; 
    MyView = Backbone.View.extend({ 
    events: { 
     "click": "testHandler" 
    }, 
    testHandler: function() { 
     console.log("click handled"); 
     return false; 
    } 
    }); 
    view = new MyView({ 
    el: $('#test_container') 
    }); 
    view.render; 
}).call(this); 

लेकिन click घटना testHandler आग नहीं करता है जब मैं test_container में क्लिक करें।

अगर मैं करने के लिए उत्पादन जावास्क्रिप्ट बदलने के लिए:

$(function() { 
    var MyView, view; 
    MyView = Backbone.View.extend({ 
    events: { 
     "click": "testHandler" 
    }, 
    testHandler: function() { 
     console.log("click handled"); 
     return false; 
    } 
    }); 
    view = new MyView({ 
    el: $('#test_container') 
    }); 
    view.render; 
}); 

call(this) निकाला जा रहा है और $ जोड़कर, सब कुछ उम्मीद के रूप में काम करता है। मैं क्या खो रहा हूँ?

Answer 1

(function() {}).call(this); 

एक रिसीवर निर्दिष्ट करते समय तत्काल एक अज्ञात फ़ंक्शन का आह्वान करने का एक तरीका है। यह इस एक ही तरह के रूप में मूल रूप से काम करता है:

this.method = function() {}; 
this.method(); 

$(function() {}), कम से कम jQuery में, के लिए

$(document).ready(function() {}) 

जो दिया समारोह जब डोम पेड़ पूरी तरह से निर्माण किया गया है चलाता है आशुलिपि है। ऐसा लगता है कि यह ठीक से काम करने के लिए आपके Backbone.View.extend फ़ंक्शन के लिए आवश्यक शर्त है।

Answer 2

, एक साथ CoffeeScript और jQuery का उपयोग कर आवेदन स्क्रिप्ट के लिए के लिए टेम्पलेट की इस तरह में अपने कोड डाल:

$ = jQuery 
$ -> 

    MyView = Backbone.View.extend 
    events: 
     "click": "testHandler" 
    testHandler: -> 
     console.log "click handled" 
     false 

    view = new MyView el: $('#test_container') 
    view.render() 

Answer 3

क्या जब दृश्य होता है, या कम से कम view.el गतिशील रूप से उत्पन्न किया जाता है? आप eventhandlers मैन्युअल रूप से सेट करने के लिए view.delegateEvents() विधि को कॉल कर सकते हैं।

यहां एक पेरेंट व्यू में एक बाल दृश्य प्रस्तुत करने के लिए समान कॉफ़ीस्क्रिप्ट है, फिर बच्चे दृश्यों को प्रस्तुत करना।

window.ParentView = Backbone.View.extend 
    addOne: (thing) -> 
    view = new ChildView({model: thing}) 
    this.el.append view.render().el 
    view.delegateEvents() 

Answer 4

CoffeeScript वर्ग घोषणा वाक्य रचना, उदा .:

class BacklogView extends Backbone.View 
    constructor: (@el) -> 
    this.delegateEvents this.events 

    events: 
    "click" : "addStory" 

    # callbacks 
    addStory: -> 
    console.log 'it works!'