My application uses backbone.js and requirejs, I have a "Questions module, that displays questions from database and its answers" and below are the structure of the module:
everything is going ok with my app as i could retrieve all the data from the collection and render it to the page. earlier this week i was stacked with an issue when creating my rating system that consist of up and down buttons,
what i need to do is to update the model when the user clicking on the up/ down button with the new value and re-render the item view again with the new value.
I'll attach for you the code of the four pages mentioned above, everything on the codes below are working perfectly and i didn't include any functions or events that should handle the update procedure.
Questions view
// Filename: views/_activity_slider_inHeader
define([
'jquery',
'underscore',
'backbone',
'app/config',
'app/collections/questions',
'app/views/home_question_item',
'text!templates/questions_home.html',
'bootbox'
], function($, _, Backbone, Config, QuestionsCollection, SingleQuestionView, question_slider_template, bootbox) {
var ActivitySlider = Backbone.View.extend({
el: $(".content_container"),
template: _.template(question_slider_template),
initialize: function() {
/*
* initial script
*/
var questionsCollection = new QuestionsCollection();
this.collection = questionsCollection;
questionsCollection.fetch({
reset: true,
error: function(model, xhr, options) {
/*
* When triggering error:
* 1. If ther response is not valid json
* 2. There is error connecting to the server
*/
if (xhr['readyState'] === 1 | xhr['status'] === 404) {
/*
* the connection has not been made, user may be not connected to the internet
* @readyState The state of the request:
* 0 = UNSENT
* 1 = OPENED
* 2 = HEADERS_RECEIVED
* 3 = LOADING
* 4 = DONE
*/
var msg = "pla pla",
title = "pla pla";
bootbox.dialog({
/*
* bootbox.dialog, bootbox.prompt, bootbox.confirm, bootbox.alert
* bootbox should have a callback used for the buttons
*/
message: msg,
title: title,
buttons: {
main: {
label: "pla pla",
className: "",
callback: function() {
}
}
}
});
}
if (xhr['readyState'] === 4 & xhr['status'] === 200) {
/*
* Handling empty data
* connections to the server made successfully but seems to be there is no data returned by the server
*/
}
}
});
this.listenTo(this.collection, 'reset', this.render);
this.renderList();
},
render: function(questions) {
/*
* Ilterate through all activities and start rendering item by item through the SingleActivityView
*/
if (questions.size() === 0) {
/*
* there is no available activities
* further use ..
*/
} else {
var i = 1;
//there is activities available
questions.each(function(question) {
//create instance of the single item view
var current = question.attributes,
singleQuestionView = new SingleQuestionView({
model: question,
collection: this.collection,
id: i
});
this.$el.append(singleQuestionView.render().el);
i++;
}, this);
}
},
renderList: function() {
/*
* rendering the slider structure itself first
*/
var data = {
path: Config.baseUrl,
_: _
};
this.$el.append(this.template(data));
}
});
return ActivitySlider;
});
Question item view
/* Filename: views/home_question_item
* used to handle one row of the questions objects, merge the model data onto call list item
*/
define([
'jquery',
'underscore',
'backbone',
'app/config',
'text!templates/question_item_home.html',
'string',
'moment',
'moment_ar',
'jquerycookie',
'purl'
], function($, _, Backbone, Config, QuestionItemTemplate, S, moment, moment_ar) {
var url = $.url(),
ActivityItemView = Backbone.View.extend({
el: $("li"),
template: _.template(QuestionItemTemplate),
initialize: function(){
},
render: function() {
var model = this.model.attributes;
var data = {
path: Config.baseUrl,
lang: url.segment(1),
id: model['id'],
date: model['date'],
views: model['views'],
author: model['author'],
authorName: model['authorName'],
question: model['question'],
answer: model['answer'],
rate: model['rate'],
_ : _,
S: S,
moment: moment
};
$(".list_of_question").append(this.template(data));
return this;
},
close: function(){
console.log('destroyed');
$(this.el).unbind();
$(this.el).remove();
}
});
return ActivityItemView;
});
Questions collection
// Filename: collections/activities
define([
'jquery',
'underscore',
'backbone',
'app/config',
'app/models/question',
'moment',
'purl'
], function ($, _, Backbone, Config, question, moment) {
var url = $.url(),
ActivitiesCollection = Backbone.Collection.extend({
model: question,
url: Config.baseUrl + url.segment(1) + '/pull/questions'
});
return ActivitiesCollection;
});
Questions model
// Filename: models/activity
define([
'jquery',
'underscore',
'backbone',
'app/config',
'purl'
], function ($, _, Backbone, Config) {
var url = $.url(),
ActivityModel = Backbone.Model.extend({
defaults: {
id: 'N/A'
},
urlRoot: Config.baseUrl + url.segment(1) + '/pull/questions/'
});
return ActivityModel;
});
I haven't tested the code but it should be something like this:
var ActivityItemView = Backbone.View.extend({
el: $("li"),
template: _.template(QuestionItemTemplate),
initialize: function(options){
this.model = options.model;
this.listenTo(this.model, 'change', this.render, this);
},
events : {
'click #arrowUp' : 'increaseModelRating',
'click #arrowDown' : 'decreaseModelRating',
},
render: function() {
var data = { '...' };
$(".list_of_question").append(this.template(data));
return this;
},
increaseModelRating: function() {
var currentRating = this.model.get('rating');
this.model.set('rating', ++currentRating);
},
decreaseModelRating: function() {
var currentRating = this.model.get('rating');
this.model.set('rating', --currentRating);
},
close: function() { '...' }
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments