Bộ sưu tập thêm trình xử lý sự kiện vào Backbone

Question

Tôi đang cố gắng cập nhật chế độ xem của mình bất cứ khi nào tôi thêm mô hình mới vào bộ sưu tập của mình. Câu hỏi đầu tiên của tôi là để tôi tự động thêm một mô hình vào bộ sưu tập của tôi khi tôi lưu mô hình đó, như:

PostsApp.Views.Form = Backbone.View.extend({ 
    template: _.template($('#form-template').html()), 
    render: function(){ 
     this.$el.html(this.template(this.model.toJSON())); 
    }, 
    events:{ 
     'click button' : 'save' 
    }, 

    save: function(e){ 
     console.log("is this working"); 
     e.preventDefault(); 
     var newname = this.$('input[name=name-input]').val(); 
     var newadress = this.$('input[name=adress-input]').val(); 
     this.model.save({name: newname, adress : newadress}); 
    } 


}); 

hay tôi vẫn phải làm collection.add()

Ngoài ra để xem mô hình mới trong quan điểm của tôi, tôi đang cố gắng để thêm một 'thêm' sự kiện người nghe như thế này:

PostsApp.Views.Posts = Backbone.View.extend({ 
    initialize: function(){ 
     this.collection.on('add', this.addOne, this); 

    }, 
    render: function(){ 
     this.collection.forEach(this.addOne, this); 
    }, 

    addOne: function(post){ 
     var postView = new PostsApp.Views.Post({model:post}); 
     postView.render(); 
     this.$el.append(postView.el); 
    } 
}); 

doesnt làm việc không chỉ này, nhưng khi tôi thêm các phương pháp khởi tạo, nó chỉ là bản sao tất cả mọi thứ trong mô hình của tôi khi trang được tải đầu tiên.

Answer 1

Nope .. Khi bạn làm một model.save, nó sẽ chỉ tạo ra một mô hình zombie (Nếu nó không phải đã là một phần của bộ sưu tập .i.e Nếu một mô hình mới được lưu) mà không phải là một phần của bất kỳ bộ sưu tập.

Vì vậy, sự kiện thêm sẽ không được kích hoạt cho bộ sưu tập.

Nếu bạn muốn add sự kiện được kích hoạt, Sử dụng phương pháp create của bộ sưu tập, sau đó sẽ biết mà bộ sưu tập các mô hình mới đã được thêm vào ..

collection.create({model}); 

Sau đó, nó sẽ trong nội bộ thêm mô hình để các bộ sưu tập và bắn các add event

Ngoài ra nó là một ý tưởng tốt hơn để sử dụng listenTo thay vì các sự kiện gắn sử dụng on

this.listenTo(this.collection, 'add', this.addOne); 

Mã

PostsApp.Views.Form = Backbone.View.extend({ 
    template: _.template($('#form-template').html()), 
    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
    }, 
    events: { 
     'click button': 'save' 
    }, 

    save: function (e) { 
     console.log("is this working"); 
     e.preventDefault(); 
     var newname = this.$('input[name=name-input]').val(); 
     var newadress = this.$('input[name=adress-input]').val(); 
     this.collection.create({ 
      name: newname, 
      adress: newadress 
     }); 
    } 
}); 

PostsApp.Views.Posts = Backbone.View.extend({ 
    initialize: function() { 
     this.listenTo(this.collection, 'add', this.addOne); 

    }, 
    render: function() { 
     this.collection.forEach(this.addOne, this); 
    }, 

    addOne: function (post) { 
     var postView = new PostsApp.Views.Post({ 
      model: post, 
      collection : this.collection 
     }); 
     postView.render(); 
     this.$el.append(postView.el); 
    } 
});