Backbone.js: rendu de collections dans des applications du monde réel

Question

Malheureusement, la plupart des "tutoriel" exemples de backbone.js apps assumer un propre modèle d'ardoise. I-.e. que le modèle collections sont vides au départ, jusqu'à ce qu'un utilisateur ajoute un élément. Bien sûr, ce n'est pas le cas dans un monde réel, app, où vous avez généralement une collection existante pour commencer à partir de l'extrémité arrière du magasin.

Je voudrais savoir comment traiter avec les collections de la colonne vertébrale. Plus précisément:

• Comment rendre une collection après qu'il a été fetchsu? Est juste un cas d'itération dans la collection? Si cela devait être déclenchée par un événement quelconque?

• L'épine dorsale docs de parler de "bootstrapping", dont je comprends les moyens à l'aide des données disponibles sur le chargement initial (cela a un sens d'un point de vue RÉFÉRENCEMENT). Mais comment cela fonctionne dans la pratique? Les données sont sous-évaluées en JS côté serveur? Ou le JS examine les DOM?

J'ai l'impression que c'est une mauvaise question, mais je m'attends à le développer sur la base des réponses.

MODIFIER

Donc il semble que le consensus est d'ajouter les données en tant que partie de la JS et le processus de chargement de page.

Un gros inconvénient que je vois avec cette technique est que l'information n'est pas disponible pour les spiders des moteurs de recherche. De ce point de vue, il peut être préférable de les extraire à partir du DOM (bien que je n'ai pas vu quelqu'un le faire de cette façon). Ou peut-être ajouter le code HTML côté serveur et coller les données dans le JS?

Answer 1

Je suis tombé sur la même situation que vous, je n'ai pas toujours mes données amorcé un premier temps (surtout si son à partir d'un tiers des appels d'api). Je n'ai pas trouvé de tutoriels qui font cela, mais en regardant à travers la documentation, il est assez facile. Vous avez juste besoin de lier le "reset" de l'événement (ce qui est déclenché lorsque l'ensemble de la collection est repeuplé) sur votre collection et de rendu. Heres un exemple rapide:

my_application.js

window.MyApplication = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {},
  init: function() {
    // Start the data loading
    this.someItems = new MyApplication.Collections.Items();
    this.someItems.fetch();

    // Start rendering the UI before the data is ready
    new MyApplication.Routers.Items(this.someItems);
    Backbone.history.start();
  }
};

routers/items_router.js

MyApplication.Routers.Items = Backbone.Router.extend({
  routes: {
    "" : "index"
  },

  initialize: function(collection) {
    this.collection = collection;
  },

  index: function() {
    var view = new MyApplication.Views.ItemsIndex({ collection: this.collection });
    $('.items').html(view.render().el);
  }
});

views/items/items_index.js

MyApplication.Views.ItemsIndex = Backbone.View.extend({
  initialize: function() {
    _.bindAll(this, "render");

    // Once the collection is fetched re-render the view
    this.collection.bind("reset", this.render);
  },

  render: function() {
    console.log(this.collection.length);
    // Render content
    return this;
  }
});

Answer 2

En rendant les collections, oui j'ai l'habitude de faire une itération sur une collection et de créer une vue d'enfant pour chacun des modèles. Voici un lien qui pourrait être utile sur ce http://liquidmedia.ca/blog/2011/02/backbone-js-part-3/

Quand devriez-vous vous rendre? Eh bien, c'est une question difficile à répondre, mais je ne dirais pas que c'est en réponse à un événement particulier. Une chose que j'aime, c'est que nous avons une vue principale qui rend sous des vues qui rendent les autres sous-vues. Par convention, nous n'avons pas rendre directement à la DOM, mais une fois que tous les points de vue sont rendus, nous ajoutons la vue principale pour les DOM et l'ensemble de la page s'affiche immédiatement. Cela évite le "flash de non stylé contenu"

Concernant l'amorçage, je vois à partir du contenu que vous avez lu la FAQ, et c'est exactement ce que j'ai fait dans la pratique. J'utilise ASP.Net MVC 3, donc de mon côté serveur de rendu aurait quelque chose comme (bien que je ne mettrais pas "livres" sur l'espace de noms global normalement):

<script type="text/javascript">
    books = new BooksCollection();
    books.reset(@Html.ToJson(Model));
</script>

J'espère que c'est utile.

Answer 3

En fait, j'ai fait un peu de travail sur la colonne vertébrale pour un peu de temps, et j'ai trouvé que l'Amorçage de données est très utile dans certains cas, lorsque vous savez que vous avez besoin que les données DÈS QUE la page se charge ainsi de réduire un supplément appel AJAX)

Dans Symfony, je le fais en rendant les données requises dans le de cette façon:

<script type="text/template" id="__user-boostrap">
    {% echo your data from php or render a controller in symfony or whatever server side script/framework you want %}
    // for example in symfony2, I do:
    {% render "myBundle:Core:getUser" %}
</script>

Maintenant, dans la fonction initialize (), vous pouvez soulever ces données directement depuis les DOM, et de commencer à faire le travail, comme d'habitude:

Par exemple, dans mon Routeur, je ne

myApp.Router = Backbone.Router.extend({
    var data = JSON.parse($('__user-bootstrap').html());
    var __games = new myApp.Games();
    __games.reset(__games.parse(data.games));
    var gameList = new myApp.GameListView({ collection: __games });
    $(this.gameView).html(gameList.$el);
});

Espérons que cela aide...