Vertebral.Ver "el" confusión

Question

Vertebral.Ver "el" confusión

¿Cómo se debe manejar el el de una vista? Tiene que ser activado, de lo contrario los eventos no se disparan (ver aquí).

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

96

javascript backbone.js backbone-views

Author: Community, 2011-04-11

Source

3 answers

Un poco viejo ahora, pero yo también estaba confundido, por lo que 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();
});

6

Author: Mark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-26 12:27:20

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

1

Author: joshvermaire,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-04-12 08:02:20

score 118 · Accepted Answer

Un el de vistas es donde se lleva a cabo todo el enlace de eventos. No tiene que usarlo, pero si desea que backbone active eventos, debe hacer su trabajo de renderizado en el el. Un views el es un elemento DOM pero no tiene que ser un elemento preexistente. Se creará si no sacas uno de tu página actual, pero tendrás que insertarlo en la página si alguna vez quieres 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 la vista simplemente 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 ToDo en la columna vertebral.js site. Creo que la convención es hacer que el contenido en el el. Por lo tanto, el el sirve como un lugar de aterrizaje o un contenedor para colocar su contenido con plantillas. Backbone luego vincula sus eventos a los datos del modelo dentro de él.

Al crear una vista, puede manipular el el de cuatro maneras utilizando 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. Puedes cambiar la etiqueta a otra cosa usando using tagName (por ejemplo, tagName: "li", te dará un el de <li></li>). También puede establecer el id y la clase de el. Aún así el no es parte de tu página. La propiedad el le permite hacer manipulación de grano muy fino del objeto el. La mayoría de las veces uso un el: $("someElementInThePage") que en realidad une toda la manipulación que haces a el en tu vista a la página actual. De lo contrario, si desea ver todo el trabajo duro que ha hecho en su vista aparecer en la página, deberá insertarlo/agregarlo a la página en otro lugar de su vista (probablemente en render). Me gusta pensar en el como el contenedor que toda tu vista manipula.