Tạo lại một khung nhìn đã bị loại bỏ trong các đường trục js

Question

Hàm View.remove() trong các đường trục js loại bỏ phần tử vùng chứa của khung nhìn khỏi ngăn DOM khỏi việc tái tạo các khung nhìn đã bị xóa. Bất cứ ý tưởng như thế nào kịch bản này được xử lý

Đây là mã của tôi,

var AttributeView = Backbone.View.extend({ 
     el: $("#attrs"), 
     template:_.template($('#attrs-template').html()), 

     initialize:function() { 
     }, 


     render:function (eventName) { 
      $(this.el).html(this.template(this.model.toJSON())); 
      return this; 
      }, 

     dispose:function(eventName){ 
      this.unbind(); 
      this.remove(); 
     }, 

    }); 


var attrView = new AttributeView(); 
.... 
attrView.dispose(); 
//Later on some event I do the below 
attrView = new AttributeView() 
attrView.render(); 

Hai dòng cuối cùng trên không tái tạo xem như div với id = "attrs" không phải là còn ở đó.

Answer 1

Trước hết, bạn không cần phương pháp dispose của bạn, tiêu chuẩn remove là đủ:

var attrView = new AttributeView(); 
//.... 
attrView.remove(); // <--------- Do this instead 
//... 
attrView = new AttributeView() 
attrView.render(); 

Thứ hai, bạn có thể ghi đè remove nếu phiên bản tiêu chuẩn không làm những gì bạn cần. Các default implementation chỉ đơn giản là loại bỏ this.el và dọn dẹp một số người nghe sự kiện:

remove: function() { 
    this.$el.remove(); 
    this.stopListening(); 
    return this; 
}, 

Trong trường hợp của bạn, bạn muốn phục hồi lại tất cả những gì render làm và đó có nghĩa là giải phóng ra HTML bênthis.el và loại bỏ các sự kiện bằng cách gọi undelegateEvents:

remove: function() { 
    this.undelegateEvents(); 
    this.$el.empty(); 
    this.stopListening(); 
    return this; 
}, 

Sau đó, bạn có thể gọi attrView.remove() và tắt nó đi và (new AttributeView()).render() để đưa lại.

Demo: http://jsfiddle.net/ambiguous/Pu9a2/3/

Answer 2

Hãy xem LayoutManager cho Backbone xem, mà hiểu rằng khi bạn xóa một cái nhìn (mẹ - theo nghĩa ngăn chặn và không đối tượng phân cấp cảm giác), subviews của nó cũng nên được gỡ bỏ.