Javascript 如何更新模型是集合的一部分
我的应用程序使用backbone.js和requirejs，我有一个“问题模块，显示来自数据库的问题及其答案”，下面是模块的结构：Javascript 如何更新模型是集合的一部分,javascript,backbone.js,requirejs,Javascript,Backbone.js,Requirejs,我的应用程序使用backbone.js和requirejs，我有一个“问题模块，显示来自数据库的问题及其答案”，下面是模块的结构： 意见/问题意见 视图/问题项视图 收集/问题收集 模型/问题模型 我的应用程序一切正常，因为我可以从集合中检索所有数据并将其呈现到页面。本周早些时候，我在创建由上下按钮组成的评分系统时遇到了一个问题 我需要做的是在用户使用新值单击向上/向下按钮时更新模型，并使用新值重新渲染项目视图。 我将为您附上上面提到的四页代码，下面代码中的所有内容都工作正常，我没有包含任何应该
// 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;
});
/* 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;
});
// 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;
});
/* 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;
});
// 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;
});
// 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;
});
我还没有测试代码，但应该是这样的：
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() { '...' }
});
但是你试过什么？在问题视图中需要一个函数，当用户单击箭头时会触发该函数。此函数应使用新的速率更新问题模型。问题项视图应该监听模型的更改事件以重新呈现自己。@Puigcerber这里是重点，我需要知道如何&在哪里用新速率更新模型本身，然后监听模型更改将很容易：）太好了，我想现在应该更近了，现在，我如何将这些更改保存到该模型的数据库中呢？设置属性后，仅调用
this.model.save（）