Render a Backbone.js collection with a template

Question

i have been working on backbone. But i am to lock on the collection and view.

The Javascript is here with a model, a collection, a view :

var lieu = Backbone.Model.extend({
  defaults: {
    Lieu: '',
    Activite: '',
    ImagePrincipal: '',
    Gallery:'',
    Texte:''
  }
});

var LieuCollection = Backbone.Collection.extend({
    model : lieu
});

var LieuView = Backbone.View.extend({
  el: '.slider',

  initialize: function() {
    this.template = _.template($("#lieu_template").html());
    this.collection.bind("reset", this.render, this);
  },

  render: function() {
    var Content = this.template(this.collection.toJSON());
    $(this.el).html(Content);
    return this;
  }
});

$(function() {
  var Collection = new LieuCollection();

  Collection.add(
    new lieu({
      Lieu: 'Lorem 1',
      Activite: 'Lorem 2',
      ImagePrincipal: 'http://lorempixel.com/g/1200/800/sports/',
      Gallery: [
          'http://lorempixel.com/g/1200/800/AAA/',
          'http://lorempixel.com/g/1200/800/BBB/',
          'http://lorempixel.com/g/1200/800/BBB/',
          'http://lorempixel.com/g/1200/800/BBB/'
      ],
      Texte: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam gravida purus eros, id tempus elit ullamcorper vitae. Fusce faucibus velit diam, vitae pulvinar dui convallis eu. In non sem sit amet odio lobortis dignissim id a nisl. Nulla ut metus elementum, iaculis lacus non, laoreet risus. Aliquam placerat tempus dapibus. Nam ut tristique odio, sed consequat justo. Integer id nislat ante ultrices dictum.'
    })
  );

  var lieuView = new LieuView({collection: LieuCollection});
});

The HTML with a template, it's ok ? :

<section id="events" role="events" data-id="events" class="line w100 center">
        <div class="eventSlider">
            <div class="slider">

                <script type="text/template" id="lieu_template">
                <% _.each(lieux, function(lieu) { %>
                <div class="item">
                    <div class="intro">
                        <div class="midway-horizontal midway-vertical">
                            <h1><%= lieu.Lieu %></h1>
                            <p><%= lieu.Activite %></p>
                        </div>
                    </div>

                    <img src= "<%= lieu.ImagePrincipal %>" />
                </div>
                <% }); %>
                </script>

            </div>
        </div>
    </section>

Thanks very much. The documentation Backbone is great but i don't know why it does not work...

Answer 1

1. Separate your markup and your templates. Your template would be overwritten by your view.render and would disappear from future reference

   <section id="events" role="events" data-id="events" class="line w100 center">
       <div class="eventSlider">
           <div class="slider">
           </div>
       </div>
   </section>
   
   <script type="text/template" id="lieu_template">
   <% _.each(lieux, function(lieu) { %>
   <div class="item">
       <div class="intro">
           <div class="midway-horizontal midway-vertical">
               <h1><%= lieu.Lieu %></h1>
               <p><%= lieu.Activite %></p>
           </div>
       </div>
       <img src= "<%= lieu.ImagePrincipal %>" />
   </div>
   <% }); %>
   </script>
   

2. Pass an instance to your view constructor, not the class :

   var lieuView = new LieuView({collection: Collection});
   

3. Call your view render after constructing it. As is, your collection is not reset and does not trigger a render.

   lieuView.render();
   

4. Pass the correct arguments to your template : you use a lieux variable but you don't declare it anywhere

   var Content = this.template({
       lieux: this.collection.toJSON()
   });
   

And what seems to be a working demo http://jsfiddle.net/nikoshr/cKBY6/1/

---

Notes :

• make up your mind on the case you want to use for classes and variables or you'll end with a complete mess. For example, you have lieu and LieuCollection as classes, Collection and lieuView as instances
• bindings have evolved and are usually declared as this.listenTo(this.collection, "reset", this.render, this)
• in the same vein, use the cached jQuery object this.$el instead of $(this.el)
• don't declare a static el in your view class, pass it as an argument : var lieuView = new LieuView({collection: Collection, el: '.slider'});