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;
});