2012-04-03 9 views
5

Ho una vista backbone che associa un'azione a un elemento nel DOM. Il problema è che l'elemento DOM non è stato reso quando gli eventi vengono chiamati. Il mio codice è simile al seguente:Come associare eventi al DOM dopo l'inizializzazione della funzione in backbone?

// Change the focus to a full goal view 
    var GoalFullView = Backbone.View.extend({ 

    // Bind the goal full view 
    el: $("#main"), 

    // Events for making changes to the goal 
    events: { 
     "keypress #goal-update": "createOnEnter", 
    }, 

    // Cache the template for the goal full view 
    template: _.template($("#goal-full-template").html()), 

    // Render the goal full and all of its goal updates 
    initialize: function() { 
     this.render(); 
     this.collection = new GoalUpdateList; 
     this.collection.bind('add', this.addOne, this); 
     this.collection.bind('reset', this.addAll, this); 

     this.collection.fetch(); 
    }, 

Come si può vedere, l'evento di legame si verifica prima l'inizializzazione in modo che non è possibile individuare l'elemento DOM, perché non è stato reso. Come posso ritardare il binding dell'evento fino a dopo l'inizializzazione?

Edit 1: Hmm, faccio un log della console, e le stampe qualcosa su pressione di un tasto, ma sto ottenendo questo messaggio nella mia console gli sviluppatori di Chrome:

Uncaught TypeError: Cannot call method 'apply' of undefined 

Cosa significa?

+0

solo legano gli eventi nella funzione di inizializzazione. o usare la delega. vale a dire, associare l'evento a un elemento padre e testare nel callback dell'evento quale elemento ha attivato l'evento. – mpm

+0

Penso di usare questo approccio tutto il tempo e non ho alcun problema .. fammi controllare. – fguillen

+0

Non ricordo l'evento chiamato 'keypress', ma ricordo 'keyup'. potrebbe essere il problema? (btw, amo il tuo nome utente :) –

risposta

3

Come mi aspettavo il problema è in un altro posto.

La dichiarazione di associazione DOM events può essere eseguita prima che l'elemento DOM sia reale.

penso che questo esempio di codice riproduce la situazione si sta parlando e ancora il DOM event è rilegato in modo corretto.

var View = Backbone.View.extend({ 
    events: { 
    "click #link": "click" 
    }, 

    click: function(){ 
    console.log("click event"); 
    }, 

    render: function(){ 
    this.$el.html("<a href='#' id='link' onclick='return false'>link</a>"); 
    } 
}); 

new View({ el: "body" }).render();​ 

Controllare il jsfiddle example code

+0

Funziona, ma ho avuto esattamente lo stesso problema descritto nel post, che mi aspetterei di lavorare. Non importa se dichiaro 'this.el' nel metodo di inizializzazione. –

Problemi correlati