fetching data and show them in proper place in backbone - backbone.js

Question

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:
the list template:
<div class="message-list-actions">
<div class="action">
<select>
<option value="0">Bulk Actions</option>
<option value="1">Delete</option>
<option value="2">Mark As Read</option>
</select>
<button class="grey">OK</button>
</div>
<div class="action">
<select>
<option value="0">All</option>
<option value="1">Unread Messages</option>
<option value="2">Read Messages</option>
</select>
<button class="grey">OK</button>
</div>
<div class="results right">
<form>
<label for="results">Results pr. page</label>
<select name="results">
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</form>
</div>
</div> <!-- message-list-actions -->
<div class="message-list">
<div class="message-list-header row">
<div class="left check">
<input type="checkbox" name="type"/>
<label for="type">CHECK ALL</label>
</div>
<div class="left date" >
<span class="sorter">Date</span>
</div>
<div class="large-9 columns" >
<span class="sorter">Message</span>
</div>
</div>
<section class="message-item row">
<div class="message-list"></div>
<div class="left check" >
<input type="checkbox" class="type">
</div>
<div class="left date" >
<div class="icon"></div>
</div>
<div class="large-9 columns" >
</div>
</section>
<section>
<ul class="pagination">
<li class="arrow unavailable">Previous</li>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="unavailable">…</li>
<li>12</li>
<li>13</li>
<li class="arrow">Next</li>
</ul>
</section>
other template:
<div class="message-list">
<section class="message-item row">
<div class="left check" >
<input type="checkbox" class="type">
</div>
<div class="left date" >
<p><%= created !== undefined ? created : "not available" %></p>
<div class="icon"></div>
<div class="severity normal"><%= name %></div>
</div>
<div class="large-9 columns" >
<h4><%= title %></h4>
<p><%= id %></p>
</div>
<!-- Delete -->
</section>
</div> <!-- .main -->
//view for message:
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;
});
View for list of message:
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;
});
//Model
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" && !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;
});
Collection
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;
});

Answer 1

Try following for renderMessage():
renderMessage : function(item){
var messageView = new MessageView({
model : item
});
this.$el.find('div.message-list').append(messageView.render().el);
},
Also update the code in a similar way for renderMessageDetails().