Backbone - gọi/tham khảo phụ huynh xem từ con xem

Question

Tôi mới đến Backbone và tôi muốn biết một thực hành tốt nhất cho điều này - Tôi muốn một cách dễ dàng để giao tiếp với một cái nhìn cha mẹ từ một đứa trẻ tức là cuộc gọi một phương pháp trên phụ huynh.

dụ thô sơ dưới đây sử dụng "desktop" và quan điểm "tài liệu":

class DesktopView extends Backbone.View{ 
    constructor(options?) { 
     super(options); 
     this.el = $('#desktop'); 
     this.createDocument(); 
    } 
    createDocument() { 
     dv = new DocumentView(); 
     $(this.el).append(dv.render()); 
    } 
} 

class DocumentView extends Backbone.View{ 
    constructor(options?) { 
     super(options);   
     this.tagName = 'div'; 
     this.className = 'document'; 
     this.events = { 
      "click": "clickHander" 
     }; 
    }; 
    render() { 
     return this.el; 
    } 

    clickHandler() { 
     //COMMUNICATE WITH THE DESKTOP VIEW 
    } 
} 

Tôi có nên tạo ra một mô hình cho xem tài liệu và lắng nghe để thay đổi đó?

Answer 1

Bạn có thể sử dụng các sự kiện Backbone để kích hoạt các cuộc gọi chức năng. Điều này có lợi thế là chế độ xem 'trẻ em' không phải biết về cha mẹ của nó.

var parent = Backbone.View.extend({ 
    initialize : function() { 
    this.listenTo(Backbone, 'child-click-event', function (dataFromChild) { 
     this.doSomething(dataFromChild); 
    }, this); 
    } 
}); 

var child = Backbone.View.extend({ 
    //... 
    clickHandler : function() { 
    var data; // do something and get data 
    // Parent listens to this event. 
    Backbone.trigger('child-click-event', data); 
    } 
}); 

Answer 2

Nếu bạn KHÔNG CẦN mô hình, tôi khuyên bạn nên chuyển một tham chiếu đến chế độ xem gốc thông qua các tùy chọn cho chế độ xem con. Nếu bạn cần một mô hình, thì hãy lắng nghe những thay đổi trên mô hình thông qua chế độ xem gốc. Tôi không quen thuộc với nguyên cảo, nhưng bạn muốn làm một cái gì đó như thế này:

createDocument() { 
     that = this; 
     // give reference to parent view 
     dv = new DocumentView({desktopView : that}); 
     $(this.el).append(dv.render()); 
    } 

Sau đó, bạn sẽ có thể truy cập vào nó trong giao diện trẻ như:

this.options.desktopView