Attivazione di un evento su el in Vista dorsale

Question

Ho una vista che crea e popola una lista di selezione. Voglio associare un evento sul evento Change (Quando l'utente seleziona una diversa opzione

Emette semplicemente qualcosa di simile a questo:.

<select> 
    <option value="id">ID Name</option 
</select> 

---

The View:

App.Views.SessionList = Backbone.View.extend({ 
    tagName: 'select', 
    id: 'sessionList', 
    events: { 
     'change': 'selectionChanged' 
    }, 
    initialize: function() { 
     // Load Collection 
     _.bindAll(this, 'selectionChanged'); 

     this.template = _.template($('#optionsTemplate').html()); 
     this.Sessiontemplate = _.template($('#session_template').html()); 
     this.SelectedSessiontemplate = _.template($('#selected_session_template').html()); 

     // Create Collection 
     this.SessionList = new App.Collections.SessionList(); 

     // Set Bindings 
     this.SessionList.bind('add', this.addSession, this); 
     this.SessionList.bind('reset', this.addSessions, this); 


     this.render(); 

     this.SessionList.fetch(); 
    }, 
    render: function() { 

     return this; 
    }, 
    addSession: function (item, num) { 
     if (num === 0) { 
      $(this.el).append(this.SelectedSessiontemplate(item.toJSON())); 
      console.log("Selected"); 
     } 
     else { 
      $(this.el).append(this.Sessiontemplate(item.toJSON())); 
     } 
    }, 
    addSessions: function() { 
     var self = this; 
     // Add all Rows 
     for (var i = 0; i < self.SessionList.models.length; i++) { 
      this.addSession(self.SessionList.models[i], i); 
     } 
    }, 
    selectionChanged: function (e) { 
     var field = $(e.currentTarget); 
     var value = $("option:selected", field).val(); 
    } 
}); 

Il modello di sessione è semplicemente:

<option value="{{Id}}">{{Name}}</option> 

L'evento non viene mai attivato e Sembra che non si leghi correttamente. Voglio attivarlo sulla modifica dell'elenco di selezione.

Originariamente ho pensato che potrei avere un problema simile a: backbone.js events and el, tuttavia non funziona in questo caso.

Answer 1

È difficile eseguire il debug del problema direttamente, perché non disponiamo di tutte le informazioni (cosa significa SessionList come ... i modelli, ecc.).

MA, ho abbinato l'esempio a un codice in cui l'evento funziona, anzi funziona. Spero che tu possa costruirlo da lì? Puoi fork the jsFiddle se vuoi arrivare in un posto dove fallisce per te e possiamo provare ad aiutare ulteriormente.

window.App = { Views: {} }; 

App.Views.SessionList = Backbone.View.extend({ 
    tagName: 'select', 

    events: { 
     'change': 'selectionChanged' 
    }, 

    initialize: function() { 
     _.bindAll(this, 'selectionChanged'); 
     this.render(); 
    }, 

    render: function() { 
     $(this.el).append('<option value="foo">Option 1</option>'); 
     $(this.el).append('<option value="bar">Option 2</option>');     
     return this; 
    }, 

    selectionChanged: function (e) { 
     var value = $(e.currentTarget).val(); 
     console.log("SELECTED", value); 
    } 
}); 

var view = new App.Views.SessionList(); 
$("body").append(view.el); 

Dato quel codice, si otterrà un log di console con il valore ogni volta che si seleziona un elemento.

Dal momento che non lo ottieni, immagino che stai vedendo un'eccezione o qualcosa del genere? Il tuo debugger ti dà qualche suggerimento?

Buona fortuna!