71 votes

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

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

54voto

jcreamer898 Points 3817

Il n'y a absolument rien de mal avec l'idée d'attacher une vue à un nœud DOM.

Vous pouvez même mettre juste la el, comme une propriété sur votre point de vue.

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 est, faire ce qui fonctionne... La beauté de l'épine Dorsale, c'est qu'il est flexible et de répondre à vos besoins.

Aussi loin que les courants sont concernés, en général je me trouve avoir une vue principale pour garder une trace de plus de points de vue, alors peut-être une vue de liste et un élément individuel de vues.

Un autre modèle commun autant que l'initialisation est d'avoir une sorte d'objet Application 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 dit avant que, il n'y a vraiment pas de MAUVAISE façon de faire les choses, il suffit de faire ce qui fonctionne. :)

Hésitez pas à me frapper sur twitter @jcreamer898 si vous avez besoin de plus d'aide, consultez également @derickbailey, il est une sorte de BB gourou.

Amusez-vous!

18voto

andho Points 747

Vous pouvez également envoyer un objet 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')
    });
});
 

0voto

Oleksandr Knyga Points 101

Utilisez la méthode des événements délégués:

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

Pour comprendre pourquoi: http://backbonejs.org/docs/backbone.html#section-138 près de "Définir les rappels, où"

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