Événements dans les vues Backbone

Mon application backbone.js a une collection d'articles. Les vues pour la collecte et chaque élément s'affichent comme prévu.Événements dans les vues Backbone

Chaque élément comporte deux actions, disons A et B. Comment connecter des écouteurs d'événement dans ma classe ItemView de façon à pouvoir gérer les actions A et B?

window.SourceListItemView = Backbone.View.extend({ 
tagName: "li", 

initialize: function() { 
    this.model.bind("change", this.render, this); 
    this.model.bind("destroy", this.close, this); 
}, 

render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    return this; 
}, 

events: { 
    "click .action_a": "doA", 
    "click .action_b": "doB" 
}, 

doA: function(event) { 
    alert("A clicked for " + JSON.stringify(event)); 
}, 


doB: function(event) { 
    alert("B clicked for " + JSON.stringify(event)); 
}

});

le modèle de ItemView

<a href="#sources/<%=id %>" class="source thumbnail plain" style="text-align: center;"> 
    <h4><%= name %></h4> 
    <button class="btn btn-primary action_a"> A</button> 
    <button class="btn btn-info action_b"> B</button> 
</a>

Source

2013-05-16 VNVN

Essayer de comprendre votre problème. doA, doB ne sont pas tirés? est-ce votre problème? – Protostome

Oui c'est le problème – VNVN

Cette ligne semble être le problème:

$(this.el).html(this.template(this.model.toJSON()));

Je l'ai du travail avec ceci:

this.$el.html(test(this.model.toJSON()));

Remarque J'ai changé un certain nombre de d'autres choses pour le faire fonctionner localement qui peut ou ne peut pas être furt ses problèmes.

La vue doit spécifier un modèle.
L'étiquette <a> contient les boutons.
Doit changer les fonctions JSON.Stringify (événement).

Code de travail:

<html> 

     <script src="./jquery.js"></script> 
     <script src="./underscore.js"></script> 
     <script src="./backbone.js"></script> 

     <body> 
     </body> 

     <script> 
     window.SourceListItemView = Backbone.View.extend({ 
      tagName: "li", 

      initialize: function() { 
       this.model.bind("change", this.render, this); 
       this.model.bind("destroy", this.close, this); 
      }, 

      template: function(data) { 
      var compiled = _.template('<a href="#sources/<%=id %>" class="source thumbnail plain" style="text-align: center;"> <h4><%= name %></h4> </a> <button class="btn btn-primary action_a"> A</button> <button class="btn btn-info action_b"> B</button>'); 
      return compiled; 
      }, 

      render: function() { 
       var test = this.template(); 
       this.$el.html(test(this.model.toJSON())); 
       return this; 
      }, 

      events: { 
      "click .action_a": "doA", 
      "click .action_b": "doB" 
      }, 

      doA: function(event) { 
       alert("A clicked for " + JSON.stringify(event)); 
      }, 


      doB: function(event) { 
       alert("B clicked for " + $(event.srcElement).html()); 
      } 
     }); 

     testModel = new Backbone.Model({id: 1, name: 'Elias'}); 
     testRow = new SourceListItemView({model: testModel}); 
     $('body').append(testRow.render().$el); 
     </script> 
    </html>

Source

2013-05-16 17:28:05

Merci pour la réponse! Je pense que l'astuce était la balise contenant des boutons. J'ai enlevé ça et tout a fonctionné. Merci d'avoir fait allusion à cela – VNVN

Événements dans les vues Backbone

Répondre

Questions connexes