joindre des vues backbone.js à des éléments existants et insérer el dans le DOM

Je suis en train d’implémenter ma première application Backbone non-didactique et je me pose des questions sur un aspect de l’utilisation de backbone.js qui ne s’accorde pas très bien avec moi: l’injection d’une vue dans le DOM vs. en utilisant un élément existant pour el . Je soupçonne que je vais vous donner à tous quelques “moments d’apprentissage” ici, et apprécier l’aide.

La plupart des exemples de vue Backbone que je vois sur le Web indiquent tagName, id et / ou className, lors de la création d’une vue et créent ainsi un élément non attaché à partir du DOM. Ils ressemblent généralement à quelque chose comme:

 App.MyView = Backbone.View.extend({ tagName: 'li', initialize: function () { ... }, render: function () { $(this.el).html(); return this; } }); 

Mais les tutoriels ne permettent pas toujours d’expliquer comment ils recommandent d’obtenir le rendu dans le DOM. Je l’ai vu de différentes manières. Donc, ma première question est la suivante: où est l’endroit approprié pour appeler la méthode de rendu d’une vue et insérer son el dans le DOM? (pas nécessairement un seul et même endroit). Je l’ai vu dans un routeur, dans l’initialisation de la vue ou dans les fonctions de rendu, ou simplement dans une fonction de document prête au niveau racine. ( $(function () ). Je peux imaginer que n’importe lequel de ces éléments fonctionne, mais y a-t-il une bonne façon de le faire?

Deuxièmement, je commence par un balisage / une structure filaire HTML et je convertis des parties HTML en js correspondant aux vues de fond. Plutôt que de laisser la vue rendre un élément non attaché et de fournir un point d’ancrage dans le code HTML pour le coller, je me sens plus naturel, quand il n’y aura qu’un seul élément pour une vue et qu’il ne disparaîtra pas, utiliser un élément d’encapsulation existant et vide (souvent un div ou un span ) comme el lui-même. De cette façon, je n’ai pas à me soucier de trouver la place dans le document pour insérer mon el sans attaches, ce qui pourrait finir par ressembler à ceci (notez la superposition supplémentaire):

 

Donc, une partie de ma deuxième question est, pour une vue fondamentalement statique, y a-t-il quelque chose de mal à utiliser un élément existant du HTML de la page directement comme ma vue? De cette façon, je sais que c’est déjà dans le DOM, au bon endroit, et cet appel rendra immédiatement la vue sur la page. J’y arriverais en passant l’élément existant déjà à la constsructor de ma vue en tant que «el». De cette façon, il me semble que je n’ai pas à me soucier de le coller dans le DOM (ce qui rend la question 1 en quelque sorte), et l’appel de render mettra immédiatement à jour le DOM. Par exemple

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

Est-ce une façon correcte de le faire pour les vues statiques sur la page? c’est-à-dire qu’il n’ya qu’une de ces vues et qu’elle ne disparaîtra en aucune circonstance. Ou existe-t-il une meilleure façon? Je me rends compte qu’il peut y avoir différentes façons de faire les choses (par exemple, dans un routeur, dans une vue parent, sur le chargement de la page, etc.) en fonction de la manière dont j’utilise une vue. cas d’utilisation.

Merci

Il n’y a absolument rien de mal à l’idée de joindre une vue à un nœud DOM existant.

Vous pouvez même simplement mettre l’el comme une propriété à votre avis.

 window.MyView = Backbone.View.extend( { el: '#myView', initialize: function () { this.template = _.template($('#myViewContents').html()); this.render(); }, render: function () { this.$el.html(this.template()); // this.$el is a jQuery wrapped el var return this; } }); $(function () { window.myView = new MyView(); }); 

Ce que je recommande, c’est de faire ce qui fonctionne … La beauté de Backbone est sa souplesse et sa capacité à répondre à vos besoins.

En ce qui concerne les modèles courants, je me trouve généralement doté d’une vue principale permettant de suivre les sur-vues, puis peut-être une vue de liste et des vues d’éléments individuelles.

Un autre modèle commun en ce qui concerne l’initialisation est d’avoir une sorte d’object App pour gérer les choses …

 var App = (function ($, Backbone, global) { var init = function () { global.myView = new myView(); }; return { init: init }; }(jQuery, Backbone, window)); $(function () { App.init(); }); 

Comme je l’ai déjà dit, il n’y a pas de mauvaise façon de faire les choses, il suffit de faire ce qui fonctionne. 🙂

N’hésitez pas à me contacter sur twitter @ jcreamer898 si vous avez besoin de plus d’aide, consultez aussi @derickbailey, il est un peu un gourou BB.

S’amuser!

Vous pouvez également envoyer un object HTML DOM Element dans la vue en tant que propriété «el» des options.

 window.MyView = Backbone.View.extend( { initialize: function () { this.template = _.template($('#myViewContents').html()); this.render(); }, render: function () { this.$el.html(this.template()); // this.$el is a jQuery wrapped el var return this; } }); $(function () { window.myView = new MyView({ el: document.getElementById('myView') }); }); 

Utilisez la méthode des événements delegates:

 initialize: function() { this.delegateEvents(); } 

Pour comprendre pourquoi: http://backbonejs.org/docs/backbone.html#section-138 près de “Set callbacks, where”

On dirait aussi que ces jours-ci, vous pouvez utiliser setElement .