title: fetching data and show them in proper place in backbone
body: <p>I have an issue in backbone, I want to render 100 rows of data from backend ( fetched by url) and show between of button element and pagination. I have created two templates, and have two views one for the whole page and the other for individual items. But when I fetch the data they do not go between the button and pagination div, all the 100 rows go under that. How can I put them in proper place? These are my templates: </p>
  
  <p>the list template: </p>
  
  <pre><code>&lt;div class="message-list-actions"&gt;
  
  
        &lt;div class="action"&gt;
          &lt;select&gt;
            &lt;option value="0"&gt;Bulk Actions&lt;/option&gt;
            &lt;option value="1"&gt;Delete&lt;/option&gt;
            &lt;option value="2"&gt;Mark As Read&lt;/option&gt;
          &lt;/select&gt;
          &lt;button class="grey"&gt;OK&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class="action"&gt;
          &lt;select&gt;
            &lt;option value="0"&gt;All&lt;/option&gt;
            &lt;option value="1"&gt;Unread Messages&lt;/option&gt;
            &lt;option value="2"&gt;Read Messages&lt;/option&gt;
          &lt;/select&gt;
          &lt;button class="grey"&gt;OK&lt;/button&gt;
        &lt;/div&gt;
  
        &lt;div class="results right"&gt;
            &lt;form&gt;
              &lt;label for="results"&gt;Results pr. page&lt;/label&gt;
              &lt;select name="results"&gt;
                &lt;option value="25"&gt;25&lt;/option&gt;
                &lt;option value="50"&gt;50&lt;/option&gt;
                &lt;option value="100"&gt;100&lt;/option&gt;
                &lt;option value="500"&gt;500&lt;/option&gt;
              &lt;/select&gt;
            &lt;/form&gt;
          &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- message-list-actions --&gt;
    &lt;div class="message-list"&gt;
  
        &lt;div class="message-list-header row"&gt;
  
          &lt;div class="left check"&gt;
            &lt;input type="checkbox" name="type"/&gt;
            &lt;label for="type"&gt;CHECK ALL&lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="left date" &gt;
            &lt;span class="sorter"&gt;Date&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="large-9 columns" &gt;
            &lt;span class="sorter"&gt;Message&lt;/span&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  
   &lt;section class="message-item row"&gt;
          &lt;div class="message-list"&gt;&lt;/div&gt;   
            &lt;div class="left check" &gt;
            &lt;input type="checkbox" class="type"&gt;
          &lt;/div&gt;
          &lt;div class="left date" &gt;
  
            &lt;div class="icon"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="large-9 columns" &gt;
  
  
          &lt;/div&gt;
      &lt;/section&gt;
  
  
  &lt;section&gt;
        &lt;ul class="pagination"&gt;
          &lt;li class="arrow unavailable"&gt;&lt;a href=""&gt;Previous&lt;/a&gt;&lt;/li&gt;
          &lt;li class="current"&gt;&lt;a href=""&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;4&lt;/a&gt;&lt;/li&gt;
          &lt;li class="unavailable"&gt;&lt;a href=""&gt;&amp;hellip;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;12&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;13&lt;/a&gt;&lt;/li&gt;
          &lt;li class="arrow"&gt;&lt;a href=""&gt;Next&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>other template:</p>
  
  <pre><code>   &lt;div class="message-list"&gt;
  
  
   &lt;section class="message-item row"&gt;
          &lt;div class="left check" &gt;
            &lt;input type="checkbox" class="type"&gt;
          &lt;/div&gt;
          &lt;div class="left date" &gt;
            &lt;p&gt;&lt;%= created !== undefined ? created : "not available" %&gt;&lt;/p&gt;
            &lt;div class="icon"&gt;&lt;/div&gt;
            &lt;div class="severity normal"&gt;&lt;%= name %&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="large-9 columns" &gt;
            &lt;h4&gt;&lt;a href="#messageDetailsView"&gt;&lt;%= title %&gt;&lt;/a&gt;&lt;/h4&gt;
            &lt;p&gt;&lt;%= id %&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;!-- &lt;a href="#" class="delete"&gt;Delete&lt;/a&gt; --&gt;
       &lt;/section&gt;
     &lt;/div&gt; &lt;!-- .main --&gt;
  </code></pre>
  
  <p>//view for message:</p>
  
  <pre><code>define([
      "jquery",
      "underscore",
      "backbone",
      "js/collections/messagesCollection", 
      "js/models/messagesModel", 
      "text!templates/messageView.html",
      "text!templates/messageList.html",
      "text!templates/messageDetails.html"
      ], function($, _ , Backbone,
          MessagesCollection,
          MessagesModel, 
           UserEditTemplate, UserViewTemplate, UserSelfEditTemplate, ResetPasswordTemplate, ChangePasswordTemplate){
          MessageViewTemplate, MessageListTemplate, MessageDetailsTemplate){
  
      var MessageView = Backbone.View.extend({
  
          tagName : "div",
          messageViewTemplate : _.template(MessageViewTemplate),
  
          messageDetailsTemplate : _.template(MessageDetailsTemplate),
          template : _.template(MessageDetailsTemplate),
  
          collection : MessagesCollection,
  
          initialize : function(){
              this.model.on("change", this.render, this);
              this.model.on("update", this.render, this);
          },
  
          render : function(){
              //this.$el.html(this.userTemplate(this.model.toJSON()));
              this.$el.html(this.messageViewTemplate(this.model.toJSON()));
              return this;
  
           }
  
  
      });
      return MessageView;
  });     
  </code></pre>
  
  <p>View for list of message:</p>
  
  <pre><code>define([
      "jquery",
      "underscore",
      "backbone",
      "js/models/loggedInUserModel",
      "js/models/currentTabModel",
      "js/models/messagesModel", 
      "js/collections/messagesCollection",
      "js/views/messageView", 
      "text!templates/messageList.html",
      "text!templates/messageDetails.html",
      "text!templates/header.html",
      "text!templates/breadcrumbs.html",
      "text!templates/footer.html"
      ], function($, _, Backbone,
  
          MessagesModel,
          MessagesCollection, 
          MessageView,
          MessageListTemplate, MessageDetailsTemplate, HeaderTemplate, BreadCrumbTemplate, FooterTemplate
          ){
  
          var MessagesView = Backbone.View.extend({
              el : $("#maincontent"),
              messageListTemplate : MessageListTemplate,
              messageDetailsTemplate : _.template(MessageDetailsTemplate),
              collection : MessagesCollection,
  
  
              initialize : function(){
                  console.log("initialize messages");
                  this.collection = new MessagesCollection();
  
                  this.collection.on("add", this.renderMessage, this);
                  this.collection.on("reset", this.render, this);
                  this.collection.on("update", this.render, this);
                  if(this.options.selfEdit === false || _.isUndefined(this.options.selfEdit)){
                      this.start();
                  }
                  else{
                      console.log("options", this.options);
                      this.currentUserModel.fetch();
                  }
  
              },
  
              start : function(){
                  this.collection.fetch();
                  this.currentUserModel.fetch();
  
                  this.renderFooter();
  
              },
              render : function(){
  
                  this.$el.html(this.messageListTemplate);
                  _.each(this.collection.models, function(item){
                      this.renderMessage(item);
                  }, this);
              },
  
              renderMessage : function(item){
                  var messageView = new MessageView({
                      model : item
                  });
                  this.$el.append(messageView.render().el);
              },
  
              renderMessageDetails : function(item){
                  var messageView = new MessagesView({
                      model : item
                  });
                  this.$el.append(messageView.renderSelfView().el);
              }
  
          });
      return MessagesView;
      });
  </code></pre>
  
  <p>//Model </p>
  
  <pre><code>define([
      "jquery",
      "underscore",
      "backbone"
      ], function($, _ , Backbone){
  
          var MessagesModel = Backbone.Model.extend({
              defaults : {
                  id : null,
                  created : null,
                  timestamp : null,
                  severity : null
  
              },
  
              parse : function(response){
                  response.id = response._id.$oid;
                  response.created = response.created.$date;
                  response.timestamp = response.timestamp.$date;
                  response.severity = response.severity;
  
                  return response;
              },
  
              clear : function(){
                  this.destroy();
                  this.view.remove();
              },
  
  
  
              // Convert regular JSON into MongoDB extended one.
              toExtendedJSON: function() {
                  var attrs = this.attributes;
                  attrs = _.omit(attrs, ["created", "timestamp"]);
  
                  if (_.isUndefined(attrs.created))  {
                      // console.log("this", this["this.created"]);
                      attrs.created = { $date: this.get("created") };
                  }
  
                  if (_.isUndefined(attrs.timestamp))  {
                      attrs.timestamp = { $date: this.get("timestamp") };
                  }
                  console.dir(attrs);
                  return attrs;
              },
  
              // Substute toJSON method when performing synchronization.
              sync : function(method, model, options) {
                  /*
                  * If we are performing an update we need to call the extendedJSON method
                  * By calling this, we guarantee that we comply to the MongoDB model.
                  * After applying that model, we then call Backbone .sync protoryp and then set the model.toJSON method
                  * back to its original definition.
                  */
                  if(method === "update" &amp;&amp; !model.isNew()){
                      var toJSON = this.toJSON;
                      this.toJSON = this.toExtendedJSON;
                      var ret = Backbone.sync.apply(this, arguments);
                      this.toJSON = toJSON;
                      return ret;
                  }
                  else{
                      return Backbone.sync.call(this, method, this, options);
                  }
              },
  
  
              formatDate : function(dateString) {
  
                  return new Date(dateString).toUTCString();
  
              }
  
          });
      return MessagesModel;
  });
  </code></pre>
  
  <p>Collection</p>
  
  <pre><code>define([
      "jquery",
      "underscore",
      "backbone",
      "js/models/messagesModel"
      ],function($,_, Backbone, MessagesModel){
  
  
          var MessagesCollection = Backbone.Collection.extend({
  
              model : MessagesModel,
              url : "/api/v1/message",
  
              parse : function(response, xhr){
                  return response.list;
              }
  });
          return MessagesCollection;
      });
  </code></pre>