Backbone.js Simple View -Ereignis nicht schießen

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

  •  25-10-2019
  •  | 
  •  

Frage

Kann mir jemand sagen, warum das Folgende bitte nicht funktioniert. Ich erwarte, dass der Alarm feuert, wenn ich auf den Link klicke

<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>

Hier gibt es eine jsfiddle http://jsfiddle.net/neilcharlton/yj5pz/1/

War es hilfreich?

Lösung

Dein $("body") Der Selektor feuert vor, bevor Ihr DOM geladen wird. Daher kehrt er leer zurück und bindet nie an den Link gebunden.

Backbone -Objektdefinitionen werden mit Objektliteralen definiert, was bedeutet, dass sie sofort nach der Definition bewertet werden, nicht wenn Sie das Modell instanziieren.

Dies:

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

Ist funktionell dasselbe wie folgt:

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

Da hast du eine $("body") Selektor als Wert für el, Es wird bewertet, sobald die Ansichtskonfiguration analysiert wird, was bedeutet, dass das DOM noch nicht geladen ist und nichts zurückgegeben wird.

Es gibt eine Reihe von Optionen, um dies zu lösen. Alle beinhalten die Verzögerung der Bewertung des Selektors, bis nach dem Laden des DOM.

Mein persönlicher Favorit ist es, den Selektor nach dem Laden des DOM an die Ansicht weiterzugeben:

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") });
}

Auch - wie Skylar sagte, wurde Ihre Veranstaltung falsch erklärt.

Hier ist eine funktionierende JSFIDDLE: http://jsfiddle.net/yj5pz/5/

Andere Tipps

Für den Anfang ist das Ereignisobjekt dieser Syntax:

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

Achten Sie neben Dericks Antwort auf den Umfang der DOM -Elemente, ich habe versucht, ein einfaches Klickereignis in einem Element auszulösen, aber meine Ansicht. T funktioniert. Als ich den EL in "Body" CSS -Selektor änderte, ging alles gut.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top