2011-10-18 9 views
5

¿Puede alguien decirme por qué no funciona lo siguiente por favor? Estoy esperando la alerta para disparar cuando hago clic en el enlacebackbone.js vista simple evento no dispara

<body> 
    <a class="newnote" href="#">Add new note</a> 
</body> 

<script> 
var note = Backbone.Model.extend({}); 

var notes = Backbone.Collection.extend({ 
    model: note, 
    url: '<?= $this->createUrl('/filenotes/api'); ?>' 
}); 

var note_view = Backbone.View.extend({ 
    el: 'table', 

}); 

var Appview = Backbone.View.extend({ 
    el: $('body'), 

    events: { 
     "a click" : "showForm" 
    }, 
    initialize: function(){ 
     //alert('hi'); 
    }, 
    showForm: function(){ 
     alert('hi'); 
    } 
}); 

var v = new Appview(); 
</script> 

Hay una jsFiddle aquí http://jsfiddle.net/neilcharlton/yj5Pz/1/

Respuesta

19

Su selector de $("body") se activa antes de que se cargue tu DOM, por lo que vuelve a estar vacío y nunca se vincula al enlace.

Las definiciones de objeto de Backbone se definen con literales de objeto, lo que significa que se evalúan inmediatamente en la definición, no cuando se crea una instancia del modelo.

Este:

Backbone.View.extend({foo: "bar"}) 

es funcionalmente lo mismo que esto:

var config = {foo: "bar"}; 
Backbone.View.extend(config); 

Puesto que usted tiene un selector $("body") como valor para el, que se evaluó en cuanto la configuración de Vista se analiza , lo que significa que DOM aún no se ha cargado y no se devolverá nada.

Existen varias opciones para resolver esto ... todo lo cual implica retrasar la evaluación del selector hasta que se haya cargado el DOM.

Mi favorito es pasar el selector a la vista de instancias, después de que el DOM se ha cargado:

var AppView = Backbone.View.extend({ 
    // don't specify el here 
}); 

$(function(){ 
    // after the DOM has loaded, select it and send it to the view 
    new AppView({ el: $("body") }); 
} 

también - como dijo Skylar, el evento fue declarado mal.

Aquí hay una jsFiddle de trabajo: http://jsfiddle.net/yj5Pz/5/

+0

Gracias por la información adicional. – 32423hjh32423

+1

Mejor sería confiar en el hecho de que Backbone auto-ajustará su 'el' con jQuery cuando sea el momento:' {el: 'body', ...} ', ahora' this. $ El' será el Elemento jQuery que estabas buscando. – rfunduk

+0

+1 rfunduk - la nueva serie v0.9 de backbone hace que sea mucho más fácil de manejar. no hay necesidad de envolver manualmente su el en un selector de jquery ahora, ya que la red troncal lo hace por nosotros –

9

Para empezar, los eventos objeto es de esta sintaxis:

events: { 
    "click a" : "showForm" 
}, 
1

Además de la respuesta de Derick, tenga cuidado sobre el alcance de los elementos DOM, que estaba tratando de desencadenar un simple evento click en un elemento, pero mi View.el se refería a un padre que no tiene directa , entonces, por alguna razón (tal vez un error de recursión) no estaba funcionando. Cuando cambié el seleccionador de css de "cuerpo", todo salió bien.

Cuestiones relacionadas