将新商品添加到收藏品中'添加'只触发一次

时间:2014-07-22 21:24:29

标签: backbone.js

我对骨干很新,所以可能是愚蠢的错误。 当我按下发送按钮(#send_email_button)时,会按原样呈现一封电子邮件,

但是当我再次按下它时,不再添加任何电子邮件。 我得到的唯一日志是:(第二次+推后) :

console.log('adding to collection');
console.log('about to exit');

换句话说,它甚至不会在集合中输入add处理程序。 有人可以解释为什么以及如何解决这个问题吗?

非常感谢! 编辑:如果我删除1个呈现的电子邮件,然后再次按发送,新电子邮件添加正确。

此处相关代码:

$(document).ready(function() {
    //email model
    var EmailModel = Backbone.Model.extend({

        defaults: {
            id: '',
            email_from: '',
            email_recipient: '',
            email_subject: '',
            email_data: '',
            is_email_read: '',
            email_date: ''
        }


    });

    //email collection
    var email_collection = Backbone.Collection.extend({
        model: EmailModel,
        url: '/fetch_received_emails'
    });

    var email_collection = new email_collection();

    var EmailView = Backbone.View.extend({
        model: new EmailModel(),
        tagName:'li',
         events: {

             "click #email_template_view" : "click_email"
         },

        initialize: function() {
            console.log('initializing email view');
            this.template = _.template($('#email_template').html());
            console.log('finish initializing email view');
        },

        render: function() {

            this.$el.html(this.template(this.model.toJSON()));

            return this;
        },

         click_email: function() {
             this.model.is_email_read = true;
             $('#toggle_part_email').toggleClass('no_display');
         },

    });

    var CollectionView = Backbone.View.extend({
        model: email_collection,
        el: $('#emails_class'),
        initialize: function() {
            console.log('init to collection view');
            this.model.fetch();
            this.render();
            this.model.on('change', this.render, this);
            this.model.on('add', this.render, this);
            this.model.on('remove', this.render, this);

        },

        render: function(){
            console.log('rendering collection');
            var that = this,
                i;

            that.$el.html('');

            emails = this.model.toArray();

            for (i in emails){
                console.log(' printing emails');
                console.log(emails[i]);

                var new_email_view = new EmailView( {model : emails[i]});

                that.$el.append(new_email_view.render().$el);
            }
            console.log('about to exit collection view');
            return this;
        }
    });






    $('#send_email_button').click(function(event){

        // event.preventDefault();
        var sending_date= new Date();
        sending_date = sending_date.toDateString()

        //new email to ajax

        console.log('adding to collection');
        email_collection.add(new EmailModel({
                'email_from':$('#email_from').val(),
                'email_recipient' :$('#email_recipient').val(),
                'email_subject': $('#email_subject').val(),
                'email_data':$('#email_data').val(), 
                'is_email_read':false,
                'email_date': sending_date 
            }));
        console.log('about to exit');
        return false;
    });
    //create singelton for the collection view

   var c = new CollectionView();
});

1 个答案:

答案 0 :(得分:1)

为什么不尝试将click事件用作另一个?在collectionView内部再次使用事件。

events: {

             "click #send_email_button" : "AnyNameThatYouWant"
         },

AnyNameThatYouWant: function() {
            //Do all the things
         },

试试这个。