बैकबोन जेएस देखें घटनाएं फायरिंग नहीं?

Question

मैं बैकबोन जेएस के साथ खेलने की कोशिश कर रहा हूं और अब तक सबकुछ समझ में आता है और आसानी से काम करता है।

हालांकि नीचे दिए गए कोड के साथ, मेरी कस्टम घटनाएं फायरिंग प्रतीत नहीं होती हैं। नीचे दिए गए कोड में कुछ भी क्यों खड़ा है कि यह क्यों हो सकता है? क्या मुझे दृश्य में कुछ भी "प्रारंभ करना" चाहिए? कोड/संरचना पर कोई अन्य पॉइंटर्स भी ठंडा होगा। नीचे मेरा पूरा जेएस/एचटीएमएल है।

जे एस

var Todo = Backbone.Model.extend({}); 

var TodoCollection = Backbone.Collection.extend({ 

    model: Todo, 
    url: '/Home/Todos' 

}); 

var AppView = Backbone.View.extend({ 

    // where it should listen, required? 
    el: $(".content"), 

    events: { 
     "keypress #new-todo": "enter" 
    }, 

    initialize: function() { 
     // _.bindAll(this, "render", "createOnEnter"); 
     // this.collection.bind("all", this.render); 
    }, 

    hi: function() { 
     alert('ohai'); 
    }, 

    render: function() { 
     var lis = ''; 
     $.each(this.collection.models, function() { 
      lis += '<li>' + this.get('Text') + '</li>'; 
     }); 
     $('#todo-list').append(lis); 
     return this.el; 
    }, 

    enter: function (e) { 
     alert('hi'); 
    } 

}); 


var TodoController = Backbone.Controller.extend({ 

    routes: { 
     "": "todos" 
    }, 

    initialize: function (options) { }, 

    todos: function() { 
     var todolist = new TodoCollection(); 
     todolist.fetch({ 
      success: function (data) { 
       var appview = new AppView({ collection: data }); 
       appview.render(); 
      } 
     }); 
    } 

}); 

$(function() { 
    window.app = new TodoController(); 
    Backbone.history.start(); 
}); 

एचटीएमएल

<div id="todoapp"> 
    <div class="content"> 
     <input id="new-todo" placeholder="What needs to be done?" type="text" /> 
     <div id="todos"> 
      <ul id="todo-list"> 
      </ul> 
     </div> 
     <a href="#">say hey</a> 
    </div> 
</div> 

Answer 1

el: $(".content") 

इस प्रयास करें:

var appview = new AppView({ el:$(".content"), collection: data }); 

आप एक jQuery वहाँ फोन नहीं कर सकते क्योंकि डोम अभी तक नहीं बनाया गया है। जब आप दृश्य को मेरे उदाहरण के रूप में या आरंभ में लोड किया जाता है तो आपको यह करना होगा।

Answer 2

इसके अतिरिक्त, आपके ईवेंट काम करने के लिए, आपको अपनी सामग्री को इस कार्य को प्रस्तुत करने के लिए बाध्य करना होगा। घटनाएं आपके द्वारा निर्दिष्ट तत्व से बंधी हुई हैं, इसलिए यह इस प्रकार है कि आपको अपने इवेंट-जनरेटिंग तत्वों को तत्व के रूप में बाध्य करने वाले तत्वों के रूप में होना चाहिए जो प्रतिनिधिमंडल के रूप में कार्य करता है।

Answer 3

स्वीकृत उत्तर में कमी आई है। यदि आप {el: $ ("। Content")} सेट करते हैं तो आप बहुत गतिशील नहीं हो सकते हैं। ".content" का पुन: उपयोग करना संभव नहीं है - आपके डोम के अंदर एलिमेंट। जैसे ही आप इस दृश्य पर हटाएं() को कॉल करते हैं ("सामग्री") भी चला जाएगा।

मैं एक पैरामीटर का उपयोग कि जानकारी पारित करने के लिए:

{ renderTarget: $("#content") }. 

और की प्रस्तुत करना शुरू में डोम में मेरे विचार सम्मिलित करें:

initialize: function (options) { 
    options = options || {}; 
    this.renderTarget = options.renderTarget || this.renderTarget; 
}, 
render: function() { 
    if (this.renderTarget) { 
     $(this.renderTarget).html(this.el); 
    } 
    ... render stuff into $(this.el) ... 
    return this; 
}