Je mets en place ma première réelle non-tutoriel épine Dorsale de l'app, et ont 2-ish questions à propos d'un aspect de l'utilisation de l'aide backbone.js ce n'est pas de décantation très bien avec moi, qui se rapporte à l'injection de vue du rendu el
dans les DOM contre à l'aide d'un élément existant pour el
. Je crois que je vais vous donner le tout avec quelques "moments propices à l'apprentissage" ici, et apprécie l'aide.
Plus Fédérateur voir des exemples, je vois dans le web spécifier tagName, id et/ou d'un nom de classe, lors de la création d'une Vue, et de créer ainsi un el qui est seules dans le modèle DOM. Ils cherchent en général à quelque chose comme:
App.MyView = Backbone.View.extend({
tagName: 'li',
initialize: function () {
...
},
render: function () {
$(this.el).html(<render an html template>);
return this;
}
});
Mais les tutoriels ne sont pas toujours à expliquer comment ils vous recommandons d'obtenir le rendu el dans les DOM. Je l'ai vu un peu de façons différentes. Donc, ma première question est: où est l'endroit le plus approprié d'appeler un point de vue de la méthode de rendu et d'insérer son el dans les DOM? (pas impérativement un seul et même lieu). Je l'ai vu faire dans un routeur, dans la vue de l'initialiser ou de rendre fonctions, ou tout simplement dans un niveau de la racine du document de prêt de la fonction. ( $(function ()
) . Je peux imaginer que l'un de ces travaux, mais est-il une bonne façon de le faire?
Deuxièmement, je suis en train de créer avec quelques le balisage HTML/fil de fer, et la conversion de html portions de js modèles correspondant à l'ossature de vues. Plutôt que de laisser la vue, rendre un seule élément et de fournir un point d'ancrage dans le code html à coller dans, je me sens comme son plus naturel, lorsqu'il n'existe qu'un élément d'un point de vue et il ne sera pas aller loin, pour utiliser un existant, vidé élément wrapper (souvent un div
ou span
) que l' el
lui-même. De cette façon, je n'ai pas à vous soucier de trouver l'endroit dans le document à insérer ma seule el, qui pourrait finir par ressembler à ceci (notez le supplément de superposition):
<div id="insert_the_el_in_here"> <!-- this is all that's in the original HTML doc -->
<div id="the_el"> <!-- i used to be a backbone generated, unattached el but have been rendered and inserted -->
<!-- we're finally getting to some useful stuff in here -->
</div>
</div>
Donc, une partie de ma deuxième question est, pour une vue statique, il n'y a rien de mal avec l'aide d'un élément existant à partir de la page HTML directement que mon point de vue de l' el
? De cette façon, je sais que je suis déjà dans les DOM, au bon endroit, et que l'appel rendu sera immédiatement rendu de la vue sur la page. Je voudrais obtenir cela en passant de la déjà exixting élément de mon point de vue est constsructor comme 'el'. De cette façon, il me semble, je n'ai pas à vous soucier de le coller dans le DOM (faire la question 1 sorte de discutable), et de l'appel de rendu sera immédiatement mise à jour le DOM. E. g.
<form>
<div someOtherStuff>
</div>
<span id="myView">
</span>
</form>
<script type="text/template" id = "myViewContents"> . . . </script>
<script type="application/javascript">
window.MyView = Backbone.View.extend( {
initialize: function () {
this.template = _.template($('#myViewContents').html());
this.render();
},
render: function () {
$(this.el).html(this.template());
return this;
}
});
$(function () {
window.myView = new MyView({ el: $('#myView').get(0) });
});
</script>
Est-ce un OK de façon à le faire pour des vues statiques sur la page? c'est à dire, il y a un seul de ces points de vue, et il ne va pas disparaître en toute circonstance. Ou est-il un meilleur moyen? Je me rends compte qu'il peut y avoir différentes façons de faire les choses (c'est à dire, dans un routeur, un parent de la vue, au chargement de la page, etc.) basé sur la façon dont je suis l'aide d'un point de vue, mais pour l'instant je suis à la recherche à la page initiale de la charge de cas d'utilisation.
Merci