javascript - template - Backbone.Ver confusión "el"

underscore js que es

Question

¿Cómo debe manejarse el punto de vista? Tiene que establecerse, de lo contrario los eventos no se disparan (ver here ).

¿Pero debería ser un elemento que ya está en la página? En mi aplicación, renderizo una plantilla (jQuery Templates) en un Fancybox. ¿Cuál debería ser el el en ese caso?

Answer 1

A views el es donde se lleva a cabo todo el enlace de eventos. No tiene que usarlo, pero si desea que la red troncal active eventos, debe hacer su trabajo de renderizado en el. A views el es un elemento DOM pero no tiene que ser un elemento preexistente. Se creará si no extrae uno de su página actual, pero tendrá que insertarlo en la página si alguna vez desea verlo hacer algo.

Un ejemplo: tengo una vista que crea elementos individuales

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 primera vista solo crea los elementos de la lista y la segunda vista realmente los coloca en la página. Creo que esto es bastante similar a lo que sucede en el ejemplo de Tareas en el sitio backbone.js. Creo que la convención es hacer que el contenido en el. Entonces el el sirve como un lugar de aterrizaje o un contenedor para colocar su contenido de plantilla. Backbone luego vincula sus eventos a los datos del modelo dentro de él.

Cuando creas una vista, puedes manipularla de cuatro maneras usando el: tagName: className: y id: Si ninguno de estos se declara el valor predeterminado es un div sin id o clase. Tampoco está asociado con la página en este punto. Puede cambiar la etiqueta a otra cosa utilizando el uso de tagName (por ejemplo, tagName: "li" , le dará un el de <li></li> ). Puede establecer el id y la clase de el igualmente. Todavía el el no es una parte de tu página. La propiedad el te permite realizar una manipulación de grano muy fina del objeto. La mayoría de las veces uso un el: $("someElementInThePage") que en realidad vincula toda la manipulación que haces con el en tu vista a la página actual. De lo contrario, si desea ver todo el trabajo duro que ha realizado en su vista aparecer en la página deberá insertar / agregarlo a la página en otro lugar en su vista (probablemente en el procesamiento). Me gusta pensar en el como el contenedor que manipula toda tu vista.

Answer 2

Desea que su ''el'' haga referencia a un elemento que contiene un elemento secundario que tiene un evento que desencadena un cambio en su vista. Podría ser tan ancho como una etiqueta de "cuerpo".

Answer 3

Ya era un poco viejo, pero también estaba confundido, y para otras personas que llegan aquí, este violín podría ayudar - 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();
});