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.