web-dev-qa-db-fra.com

Backbone.View "el" confusion

Comment gérer le el d'une vue? Il doit être défini, sinon les événements ne se déclenchent pas (voir ici ).

Mais devrait-il être un élément qui est déjà sur la page? Dans mon application, je convertis un modèle (modèles jQuery) en une Fancybox. Que devrait être le el dans ce cas?

javascriptbackbone.jsbackbone-views
97
Manuel Meurer

Un point de vue el est où toute la liaison d'événement a lieu. Vous n'êtes pas obligé de l'utiliser, mais si vous voulez que Backbone déclenche des événements, vous devez effectuer votre travail de rendu sur el. Une vue el est un élément DOM, mais il n'est pas nécessaire que ce soit un élément préexistant. Il sera créé si vous n'en tirez pas un à partir de votre page actuelle, mais vous devrez l'insérer dans la page si vous voulez le voir faire quoi que ce soit.

Un exemple: j'ai une vue qui crée des éléments individuels

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 première vue crée simplement les éléments de la liste et la seconde les place réellement sur la page. Je pense que cela ressemble assez à ce qui se passe dans le exemple: ToDo sur le site backbone.js. Je pense que la convention est de vous rendre contenu dans le el. Donc, el sert de lieu d'atterrissage ou de conteneur pour placer votre contenu basé sur un modèle. Backbone lie ensuite ses événements aux données de modèle qu’il contient.

Lorsque vous créez une vue, vous pouvez manipuler el de quatre manières différentes en utilisant el:, tagName:, className: Et id:. Si aucun de ceux-ci ne sont déclarés, el devient par défaut une div sans id ni classe. Il n'est également pas associé à la page à ce stade. Vous pouvez changer le tag en autre chose en utilisant tagName (par exemple, tagName: "li", Vous obtiendrez un el de <li></li>). Vous pouvez définir l'identifiant et la classe d'el de la même manière. Encore el ne fait pas partie de votre page. La propriété el vous permet de manipuler très finement le grain de l'objet el. La plupart du temps, j'utilise une el: $("someElementInThePage") qui lie en fait toutes les manipulations que vous faites à votre page à la page en cours. Sinon, si vous souhaitez que tout le travail effectué dans votre affichage soit visible sur la page, vous devrez l'insérer/l'ajouter à la page ailleurs dans votre affichage (probablement dans le rendu). J'aime penser à el comme le conteneur que tout votre point de vue manipule.

121
LeRoy

Un peu vieux maintenant, mais j’étais confus aussi, et donc pour les autres personnes qui arrivent ici, ce violon pourrait aider - 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
Mark

Vous souhaitez que votre "el" fasse référence à un élément contenant un élément enfant associé à tout événement déclenchant une modification de votre vue. Pourrait être aussi large qu'une balise "body".

1
joshvermaire