Backbone.js Simple View Event no disparar

StackOverflow https://stackoverflow.com/questions/7807149

  •  25-10-2019
  •  | 
  •  

Pregunta

¿Alguien puede decirme por qué lo siguiente no funciona por favor? Espero que la alerta se dispare cuando haga clic en el enlace

<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 un jsfiddle aquí http://jsfiddle.net/neilcharlton/yj5pz/1/

¿Fue útil?

Solución

Su $("body") Selector está disparando antes de que se cargue su DOM, por lo que regresa vacío y nunca se ata al enlace.

Las definiciones de objetos de la red troncal se definen con literales de objetos, lo que significa que se evalúan inmediatamente en la definición, no cuando instancias el modelo.

Este:

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

Es funcionalmente lo mismo que este:

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

Ya que tienes un $("body") selector como el valor para el, se evalúa tan pronto como se analiza la configuración de la vista, lo que significa que el DOM aún no se ha cargado y no se devolverá nada.

Hay una serie de opciones para resolver esto ... todas las cuales implican retrasar la evaluación del selector hasta que se cargue el DOM.

Mi favorito personal es pasar el selector a la vista en Instanciación, 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") });
}

Además, como dijo Skylar, su evento fue declarado incorrecto.

Aquí hay un jsfiddle que funciona: http://jsfiddle.net/yj5pz/5/

Otros consejos

Para empezar, el objeto de eventos es de esta sintaxis:

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

Además de la respuesta de Derick, cuídate por el alcance de DOM Elements, estaba tratando de activar un evento de clic simple en un elemento, pero mi opinión. El estaba haciendo referencia a un padre no directo, luego por alguna razón (tal vez un error de recursión) no era ' t trabajando. Cuando cambié el EL a Selector CSS "Body", todo salió bien.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top