97 votes

Backbone.View « el » confusion

Je suis la construction de ma première application avec Backbone.js et l'aime vraiment beaucoup. La documentation est un peu en dehors de la date et de l'étaler, mais jusqu'à présent, j'ai pu résoudre tous les problèmes que j'ai rencontré. Une chose que je me demande depuis que j'ai lu le premier tutoriel: comment faut-il une vue de l' "el" seront-ils traités? Il a d'être ensemble, sinon les évènements n'ont pas le feu (voir ici).

Mais doit-il être un élément qui est déjà sur la page? Dans mon application, j'ai rendu un (jQuery Templates) modèle dans une Fancybox. Quel doit être le "el" dans ce cas?

Aucun des tutoriels ou des introductions j'ai lu ramassé sur...

Réflexions et commentaires bienvenus...

121voto

LeRoy Points 1850

Une vue sur el est l'endroit où tous les cas de liaison. Vous n'avez pas à l'utiliser, mais si vous voulez épine dorsale de feu événements dont vous avez besoin pour faire votre travail de rendu sur el. Une vue sur el est un élément du DOM, mais il n'a pas à être pré-existant de l'élément. Il sera créé si vous ne tirez pas un à partir de votre page, mais vous devrez l'insérer dans la page si jamais vous voulez voir n'importe quoi.

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);
    }
});

Le premier point de vue crée les éléments de la liste et le second point de vue en fait les place sur la page. Je pense que c'est assez similaire à ce qui se passe dans la ToDo exemple sur le backbone.js site. Je pense que la convention est de vous rendre le contenu dans la el. Ainsi, le el en sert comme d'un lieu de débarquement ou d'un conteneur pour placer votre basées sur des modèles de contenu. Épine dorsale se lie ensuite à ses événements pour le modèle de données à l'intérieur d'elle.

Lorsque vous créez une vue, vous pouvez manipuler les el de quatre façons à l'aide de el:, tagName:, className:, et id:. Si aucune de ces sont déclarées el par défaut une div sans id ou une classe. Il n'est pas associé à la page à ce point. Vous pouvez modifier l'étiquette de quelque chose d'autre en utilisant tagName (par exemple, tagName: "li", vous donnera un el de l' <li></li>). Vous pouvez définir l'id de classe et de el de même. Encore el n'est pas une partie de votre page. Le el propriété vous permet de faire des grains très fins de manipulation de l'el de l'objet. La plupart du temps j'utilise un el: $("someElementInThePage") qui, de fait, se lie toutes les manipulations que vous faites à el dans votre point de vue à la page en cours. Sinon si vous voulez voir tout le dur travail que vous avez fait dans votre visionner le diaporama en haut de la page, vous devrez insérer/ajouter à la page quelque part d'autre dans votre point de vue (probablement dans le rendu). J'aime à penser que el que le conteneur que l'ensemble de votre vue manipule.

6voto

Mark Points 687

Peu vieux maintenant, mais j’ai été confondu aussi bien, et donc pour d’autres personnes qui s’y rendre, ce violon pourrait aider - http://jsfiddle.net/hRndn/2/

1voto

joshvermaire Points 892

Vous voulez votre « el » pour référencer un élément qui contient un élément enfant qui a tout événement qui entraîne un changement dans votre point de vue. Pourrait être aussi large qu’une balise « body ».

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X