bb.md

##Template

    <!-- ìci notre template -->
    <script type="text/template" id="articles-collection-template">
        <% _.each(articles, function(article) { %>
        <h1><%= article.title %></h1>
        <p><%= article.content %></p>
        <% }); %>
    </script>

    <!-- les données seront affichées ici -->
    <div id="articles-collection-container"></div>

##Modèle et Collection

window.blog = {}; 

/*--- Modèle article ---*/
blog.Article = Backbone.Model.extend({});

/*--- Collection d'articles ---*/
blog.ArticlesCollection = Backbone.Collection.extend({
    model : blog.Article,
    url : "/blogposts",
    initialize : function () {
        console.log ("Création d'une collection d'articles")
    }
});

##Vue

/*--- Vues ---*/
blog.ArticlesView = Backbone.View.extend({
    el : $("#articles-collection-container"), /*là où je vais afficher mes données dans le HTML*/

    initialize : function () {
        /* je récupère mon template */
        this.template = _.template($("#articles-collection-template").html());
    },

    render : function () {
        /* je passe mes données au template pour générer mon code html */

        var renderedContent = this.template({ articles : this.collection.toJSON() });
        $(this.el).html(renderedContent);
        return this;
    }
});

##Afficher les données

var listeArticles = new blog.ArticlesCollection();
listeArticles.add(new blog.Article({ title : "titre1", content : "contenu1" }));
listeArticles.add(new blog.Article({ title : "titre2", content : "contenu2" }));
listeArticles.add(new blog.Article({ title : "titre3", content : "contenu3" }));

/* instancier la vue en lui passant la collection en paramètre */

var articlesView = new blog.ArticlesView({ collection : blog.listeArticles });

/* afficher les informations dans la page */

articlesView.render();

##Autre possibilité :

Modifier le code de la vue comme ceci (on modifie initialize) :

/*--- Vues ---*/
blog.ArticlesView = Backbone.View.extend({
    el : $("#articles-collection-container"), /*là où je vais afficher mes données dans le HTML*/

    initialize : function () {
        /* je récupère mon template */
        this.template = _.template($("#articles-collection-template").html());

        /*--- binding ---*/
        _.bindAll(this, 'render');

        this.collection.bind('reset', this.render);
        this.collection.bind('change', this.render);
        this.collection.bind('add', this.render);
        this.collection.bind('remove', this.render);
        /*---------------*/

    },

    render : function () {
        /* je passe mes données au template pour générer mon code html */

        var renderedContent = this.template({ articles : this.collection.toJSON() });
        $(this.el).html(renderedContent);
        return this;
    }
});

du coup à chaque fois que le contenue de la collection va changer, la méthode render de la vue sera appelée :

var listeArticles = new blog.ArticlesCollection();

listeArticles.fetch({
  success:function(){
    //rien à faire, une fois les données récupérée ça de met à jour tout seul
  }, 
  error:function(){

  }
});