Backbone - 从子视图调用/引用父视图

Posted 2023-03-13

【中文标题】Backbone - 从子视图调用/引用父视图

【英文标题】：Backbone - call / reference parent view from child view

【发布时间】：2013-06-08 19:56:53

【问题描述】：

我是 Backbone 的新手，我想知道一个最佳实践 - 我想要一种简单的方法来与子视图的父视图进行通信，即调用父视图的方法。

下面使用“桌面”和“文档”视图的基本示例：

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
    

我应该为文档视图创建一个模型并监听它的变化吗？

【参考方案1】：

您可以使用 Backbone 事件来触发函数调用。这样做的好处是“子”视图不必知道它的父视图。

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

【讨论】：

技术很好。谢谢！

【参考方案2】：

如果您不需要模型，我建议通过选项将对父视图的引用传递给子视图。如果你确实需要一个模型，那么可以通过父视图监听它的变化。我不熟悉打字稿，但你想做这样的事情：

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

那么您应该可以在子视图中访问它，例如：

this.options.desktopView

【讨论】：

谢谢埃文。假设我的桌面视图很大，并且我有数百个文档视图——那还可以吗？我从来没有完全理解 javascript 是否对内存有害，或者它是否只是对原始对象的引用。

我觉得应该没问题。如果您确实遇到了性能问题，您可以尝试将您的引用附加到您的全局“应用程序”对象，无论它可能是什么。