在Backbone.Marionette中重写Marionette.Region的getEl方法

Question

我已经建立了一个项目，在其中扩展了包含两个不同区域的Backbone.Marionette.Layout 。 该布局可以在整个应用程序中用作组件。 特别地，如下设置区域。

regions : {
    masterRegion : { selector: '[data-region=master]' },    
    slaveRegion: { selector: '[data-region=slave]' }
},

特别是，我正在使用data-region选择器来注入我感兴趣的视图。

在树形结构中使用这种布局时，由于getEl函数将错误的区域注入到视图中，因此视图被复制。 显然这是我的错，并且在Marionette （v1.1.0）文档中编写了以下内容。

如果我们有parentEl，则重写getEl函数，必须重写此函数以确保在首次使用该区域时找到选择器。 如果我们尝试将区域的el分配给对象文字中的parentEl.find（selector）来构建区域，则不能保证该元素已经在DOM中，并且会导致问题

其中getEl被定义为

getEl: function(selector){
    return Marionette.$(selector);
}

因此，我的问题如下。 这是什么意思？ 如何覆盖此方法？ 进行此类覆盖的正确方法在哪里？

希望清楚。

Answer 1

这是我对此的理解：

以下几点适用于布局包含在另一个元素中的情况（“如果我们有parentEl”）
第一次使用区域时，Marionette需要根据选择器字符串选择要填充的适当DOM元素（“确保在首次使用该区域时找到选择器”）
您不能简单地在parentEl中寻找选择器（“如果我们尝试将区域的el分配给对象常量中的parentEl.find（selector）”），因为我们想要的DOM元素不一定在DOM中（“将不保证该元素已经在DOM中”）

换句话说，第一次使用区域（例如，调用show方法）时，Marionette需要构建区域实例并将其与正确的DOM元素（由selector属性指定）相关联。

但是，在Marionette可以在包含的父元素中查找DOM元素之前，必须确保已加载所有必需的DOM元素（最重要的是我们正在寻找的DOM元素）。

这样对您有意义吗？

根据flexaddicted的评论进行编辑。

您能建议我实现这一目标的正确方法吗？ 有什么方法可以覆盖下面的方法？

我认为您不需要重写此方法。 该注释指示了为什么在构建区域时以这种方式而不是通过直接分配来获取DOM元素的原因，但是它仍应与树结构一起正常工作（因为仍可以正确确定父级）。

我认为问题可能出在您的区域选择器上：因为它是“通用”的，它可能会匹配多个元素（而不是使用只能匹配1个元素的id属性进行选择），并且可能会匹配您所选择的DOM元素我不期望这样的子视图。 （这当然取决于Marionette何时查看DOM以获取选择器。）