Confusione Backbone.View “el”

Come dovrebbe essere gestita una vista? Deve essere impostato, altrimenti gli eventi non sparano (vedi qui ).

Ma dovrebbe essere un elemento già presente nella pagina? Nella mia app, renderizzo un modello (jQuery Templates) in una Fancybox. In che caso dovrebbe essere el ?

Una vista el è il luogo in cui avviene l’associazione degli eventi. Non devi usarlo ma se vuoi che la spina dorsale attivi gli 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 estrai uno dalla pagina corrente, ma dovrai inserirlo nella pagina se desideri vederlo fare qualsiasi cosa.

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

<%= someModelKey %>

"), 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 vista crea solo gli elementi dell’elenco e la seconda vista li posiziona effettivamente sulla pagina. Penso che sia abbastanza simile a ciò che accade nell’esempio ToDo sul sito backbone.js. Penso che la convenzione sia renderti contenuto in el. Quindi il EL funge da luogo di atterraggio o contenitore per posizionare il contenuto del tuo modello. Backbone lega quindi i suoi eventi ai dati del modello al suo interno.

Quando crei una vista puoi manipolare l’el in quattro modi usando el: tagName: className: tagName: e id: Se nessuno di questi viene dichiarato di default a un div senza id o class. Inoltre, non è associato alla pagina a questo punto. Puoi cambiare il tag in qualcos’altro usando l’uso di tagName (ad esempio tagName: "li" , ti darà un el di

  • ). È ansible impostare l’id e la class di el allo stesso modo. Still el non fa parte della tua pagina. La proprietà el consente di eseguire una manipolazione dei grani molto fine dell’object el. La maggior parte delle volte io uso un el: $("someElementInThePage") che in realtà lega tutte le manipolazioni che fai a el nella tua vista alla pagina corrente. Altrimenti se vuoi vedere tutto il duro lavoro che hai fatto nella tua vista, compaiono nella pagina che dovrai inserire / aggiungere alla pagina da qualche altra parte nella tua vista (probabilmente nel rendering). Mi piace pensare a el come il contenitore che manipola tutta la tua vista.

    Un po ‘vecchio adesso, ma ero anche confuso, e quindi per le 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(""); } }); $(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 triggers una modifica nella tua vista. Potrebbe essere largo quanto un tag “corpo”.