0

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

0 に答える 0