2011-10-18 11 views
5

Qualcuno può dirmi perché il seguente non funziona, per favore. Mi aspetto l'avviso di sparare quando clicco sul collegamentobackbone.js visualizzazione semplice evento non attivato

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

C'è un jsfiddle qui http://jsfiddle.net/neilcharlton/yj5Pz/1/

risposta

19

tuo selettore $("body") sta sparando prima che il tuo DOM sia caricato, quindi sta tornando vuoto e non è mai vincolante per il collegamento.

Le definizioni di oggetto backbone sono definite con letterali oggetto, il che significa che vengono valutate immediatamente sulla definizione, non quando si crea un'istanza del modello.

questo:

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

è funzionalmente lo stesso di questo:

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

Dal momento che si dispone di un selettore $("body") come valore per el, esso viene valutato non appena la configurazione View viene analizzata , il che significa che il DOM non è ancora stato caricato e non verrà restituito nulla.

Ci sono un certo numero di opzioni per risolvere questo ... che implicano un ritardo nella valutazione del selettore fino a dopo il caricamento del DOM.

Il mio preferito è quello di passare il selettore per la vista di istanze, dopo che il DOM è stato caricato:

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

Inoltre - come ha detto Skylar, l'evento è stato dichiarato sbagliato.

Ecco un JSFiddle di lavoro: http://jsfiddle.net/yj5Pz/5/

+0

Grazie per le informazioni extra. – 32423hjh32423

+1

Ancora meglio sarebbe fare affidamento sul fatto che Backbone avvolgerà automaticamente il tuo 'el' con jQuery quando sarà il momento:' {el: 'body', ...} ', ora' questo. $ El' sarà il elemento jQuery che stavi cercando. – rfunduk

+0

+1 rfunduk - la nuova serie v0.9 di backbone lo rende molto più facile da gestire. non c'è bisogno di avvolgere manualmente il tuo el in un selettore jquery ora, dal momento che backbone lo fa per noi –

9

Per cominciare, gli eventi oggetto appartiene a questa sintassi:

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

Oltre risposta di Derick, prendersi cura circa la portata degli elementi DOM, stavo cercando di innescare un semplice evento click su un elemento, ma il mio View.el stavo riferimento a un genitore non diretta , quindi per qualche motivo (forse un bug di ricorsione) non funzionava. Quando ho cambiato il selettore css di "body" tutto è andato bene.

Problemi correlati