Les événements de backbone simples ne se déclenchent pas

Question

Je joue avec backbone.js pour la première fois, mais je n'arrive pas à déclencher les événements correctement. Quelqu'un peut-il expliquer ce que je fais mal?

Très apprécié!

dans app.js chargés au fond de mon html:

var Discussion = Backbone.Model.extend({ 
    defaults: { 
     id: null, 
     title: 'New discussion' 
    }, 
    urlRoot: '/api/discussion' 
}); 

var DiscussionCollection = Backbone.Collection.extend({ 
    model: Discussion, 
    url: '/api/discussion' 
}); 

var DiscussionView = Backbone.View.extend({ 
    events: { 
     'click .btnCreateDiscussion': 'create', 
     'keypress #discussion_title': 'create' 
    }, 

    initialize: function(){ 
     //this.$el = $("#form_discussion"); 
     this.template = _.template($('#discussion-template').html()); 
    }, 

    render: function(){ 
     console.log("rendering"); 
     return this;  
    }, 

    create: function(){ 
     console.log('creating a new discussion') 
    } 
}); 

var discussionView = new DiscussionView({ el: $("#form_discussion"), model: Discussion }); 

html:

<form action="" id="form_discussion" method="post"> 

<label for="discussion_title">Discussion Title</label> 
<input type="text" id="discussion_title" name="discussion_title" /> 

<input class="btnCreateDiscussion" type="button" value="Create Discussion"> 

<script type="text/template" id="discussion-template"> 
    <h1><%= title %></h1> 
    </script> 

Answer 1

Le problème était jQuery. La version 1.x la plus récente n'a pas fonctionné, mais l'utilisation de la version 2.x la plus récente résout le problème. Il serait utile que quelqu'un puisse expliquer pourquoi nous devrions seulement utiliser 2.x dans ce cas?

Merci d'avoir aidé tout le monde.

Answer 2

Tout d'abord, vous devez appeler Backbone.View.prototype.initialize dans votre méthode surchargée pour laisser Backbone initialiser les écouteurs d'événement:

initialize: function(){ 
    //this.$el = $("#form_discussion"); 
    this.template = _.template($('#discussion-template').html()); 
    Backbone.View.prototype.initialize.call(this) 
}, 

En second lieu, rendre vue en initialize - il n'est pas la meilleure pratique. Utilisez pour cette méthode séparée render.

Answer 3

Cela semble fonctionner correctement: http://jsfiddle.net/Jbahx/. (Vérifier la colonne vertébrale & versions underscore, et assurez-vous que le DOM est initialisé)

A propos de ce que vous faites mal si:

• model: Discussion lors de l'instanciation votre point de vue. Vous devez donner à la vue une instance d'un modèle, pas une classe. Si vous donnez à la vue un modèle (facultatif), c'est généralement parce que vous voulez représenter les données d'une instance particulière.
• Votre méthode de rendu n'est jamais appelée, mais elle est inutile pour le moment, donc ce n'est pas un gros problème.
• this.template = _.template($('#discussion-template').html()); dans la méthode initialize. Mettez cela comme une propriété de la vue lors de l'extension de sorte qu'il sera mis dans le prototype de votre vue (même si elle semble être un singleton ici): template: _.template($('#discussion-template').html()),.