当我在我的收藏中运行add
时:
this.children.add(newData,{merge:true});
集合的更改事件触发并告诉我已更改的模型。但是,已更改的模型不会触发更改事件。我认为如果模型发生变化,它将触发一个变化事件。
在单个项目视图中,我有(ChildView.js
):
initalize: function(){
this.listenTo(this.model, 'change',this.render);
},
在视图中我拥有的所有项目(ChildrenView.js
):
this.listenTo(this.children, 'change', this.changed);
所以this.changed
开火了。但是有问题的模型没有触发change event
我正在进行ajax文件上传,因为现在缺少更好的方法我只是使用ajax调用来上传文件(请参阅设置集合的成功函数):
getFile:function(e){
e.preventDefault();
var that = this;
var collChildren = this.children;
console.log('this',this);
console.log(this.children);
var file = e.target.files[0];
var formData = new FormData($('#upload-child-pic-form')[0]);
console.log(this,'currentUploadU',this.currentUpload);
formData.append('child_id',this.currentUpload);
$.ajax({
url: '/x/children/upload/', //Server script to process data
type: 'POST',
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.addEventListener('progress',function(data){
$("#upload-child-pic-progress").val(data.position / data.totalSize * 100);
}, false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
beforeSend: function(data){
$("#upload-child-pic-progress").removeClass('hide');
},
success: function(data){
$("#upload-child-pic-progress").addClass('hide');
$("#add-child-profile-pics-modal").modal('hide');
var newData = $.parseJSON(data);
collChildren.add(newData,{merge:true});
},
error: function(data){
console.log('error',data);
},
// Form data
data: formData,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
},
这是我的单Child
视图
define([
'jquery',
'underscore',
'backbone',
'text!templates/children/child.html'
], function($,_,Backbone,childTemplate){
var ChildView = Backbone.View.extend({
tagName: 'li',
events: {
'click .pic-settings' : 'picSettingsClicked',
},
template: _.template(childTemplate),
initalize: function(){
this.listenTo(this.model, 'change',this.render);
},
picSettingsClicked: function(e){
e.preventDefault();
Backbone.pubsub.trigger('picSettingClick',this.model.get('id'));
},
render: function(){
console.log('changing',this.model,this.model.get('photo'),this.model.get('first_name'));
this.$el.addClass('child').html(this.template(this.model.toJSON()));
return this;
}
});
return ChildView;
});