Backbone.View "el" confusione

Come dovrebbe elessere gestita una vista ? Deve essere impostato, altrimenti gli eventi non vengono attivati ​​(vedi qui ).

Ma dovrebbe essere un elemento già presente nella pagina? Nella mia app, eseguo il rendering di un modello (jQuery Templates) in una Fancybox. Cosa dovrebbe elessere in quel caso?

A view el è dove si svolge tutto il binding degli eventi. Non devi usarlo, ma se vuoi che la spina dorsale generi eventi devi fare il tuo lavoro di rendering su el. Una vista el è un elemento DOM ma non deve essere un elemento preesistente. Verrà creato se non ne prendi uno dalla pagina corrente, ma dovrai inserirlo nella pagina se vuoi vederlo fare qualcosa.

Un esempio: ho una vista che crea singoli elementi

window.ItemView = Backbone.View.extend({
    tagName: "li", //this defaults to div if you don't declare it.
    template: _.template("<p><%= someModelKey %></p>"),
    events: {
         //this event will be attached to the model elements in
         //the el of every view inserted by AppView below
        "click": "someFunctionThatDoesSomething"
    },
    initialize: function () { 
        _.bindAll(this, "render");
        this.render();
    },
    render: function () {
        this.el.innerHTML = this.template(this.model.toJSON());
        return this;
    }
});
window.AppView = Backbone.View.extend({
    el: $("#someElementID"), //Here we actually grab a pre-existing element
    initialize: function () { 
        _.bindAll(this, "render");
        this.render(new myModel());
    },
    render: function (item) { 
        var view = new ItemView({ model: item });
        this.el.append(view.render().el);
    }
});

La prima visualizzazione crea solo gli elementi dell'elenco e la seconda visualizzazione li inserisce effettivamente nella pagina. Penso che questo sia abbastanza simile a quello che accade nell'esempio ToDo sul sito backbone.js. Penso che la convenzione sia rendere i tuoi contenuti in el. Quindi l'el serve come punto di approdo o contenitore per posizionare i tuoi contenuti basati su modelli. Backbone quindi lega i suoi eventi ai dati del modello al suo interno.

Quando si crea una vista è possibile manipolare la EL in quattro modi utilizzando el:, tagName:, className:, e id:. Se nessuno di questi viene dichiarato el il valore predefinito è un div senza id o class. Inoltre, non è associato alla pagina a questo punto. Puoi cambiare il tag in qualcos'altro usando tagName (ad esempio tagName: "li", ti darà un el di <li></li>). Allo stesso modo puoi impostare l'id e la classe di el. Ancora el non fa parte della tua pagina. La proprietà el ti consente di manipolare la grana molto fine dell'oggetto el. La maggior parte delle volte utilizzo un fileel: $("someElementInThePage")che in realtà lega tutta la manipolazione che fai alla tua vista alla pagina corrente. Altrimenti se vuoi vedere tutto il duro lavoro che hai fatto nella tua vista apparire sulla pagina dovrai inserirlo / accodarlo alla pagina da qualche altra parte nella tua vista (probabilmente in rendering). Mi piace pensare a el come al contenitore che tutta la tua vista manipola.

Un po 'vecchio ora, ma anch'io ero confuso, quindi per altre persone che arrivano qui, questo violino potrebbe aiutare - http://jsfiddle.net/hRndn/2/

var MyView = Backbone.View.extend({

    events: {
        "click .btn" : "sayHello",
    },

    sayHello : function() {
        alert("Hello");
    },


    render : function() {
        this.$el.html("<input type='button' class='btn' value='Say Hello'></input>");

    }
});

$(function() {
    myView = new MyView({el:"#parent_id"});
    myView.render();
});

Vuoi che il tuo "el" faccia riferimento a un elemento che contiene un elemento figlio che ha un evento che attiva un cambiamento nella tua vista. Potrebbe essere largo quanto un tag "body".