2012-04-03 13 views
5

Tengo vista de red troncal que vincula una acción a un elemento en el DOM. El problema es que el elemento DOM no se ha representado cuando se invocan los eventos. Mi código es el siguiente:¿Cómo vincular eventos a DOM después de la función de inicialización en la red troncal?

// 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(); 
    }, 

Como se puede ver, el evento se produce la unión antes de la inicialización de modo que no puede localizar el elemento DOM, ya que no ha sido prestado. ¿Cómo puedo retrasar el enlace del evento hasta después de la inicialización?

Edición 1: Hmm, hago un registro de la consola, e imprime algo fuera de una pulsación de tecla, pero estoy recibiendo este mensaje en mi consola de desarrolladores de Chrome:

Uncaught TypeError: Cannot call method 'apply' of undefined 

¿Qué significa esto?

+0

simplemente se unen los eventos en la función de inicialización. o use delegación. es decir, vincula el evento a un elemento principal y prueba en la devolución de llamada de evento qué elemento desencadenó el evento. – mpm

+0

Creo que utilizo este enfoque todo el tiempo y no tengo ningún problema ... déjame ver. – fguillen

+0

No recuerdo el evento llamado 'keypress', pero sí recuerdo 'keyup'. ¿Podría ser el problema? (Por cierto, amo su nombre de usuario :) –

Respuesta

3

Como esperaba, el problema está en otro lugar.

La declaración de enlace DOM events se puede realizar antes de que el elemento DOM exista real.

Creo que este ejemplo de código reproduce la situación que está hablando y aún el DOM event está enlazado correctamente.

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();​ 

Comprobar la jsfiddle example code

+0

Esto funciona, pero tenía exactamente el mismo problema que el descrito en la publicación, que espero que funcione. No importa si declaro 'this.el' en el método de inicialización. –

Cuestiones relacionadas