Question

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

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

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

当在树结构中使用这样的布局时，由于getEl函数处理错误的区域以注入视图，所以视图是重复的。显然这是我的错，在Marionette（v1.1.0）doc中写下了以下内容。

如果我们有一个必须的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元素关联（由{{指定） 1}}属性）。

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

这对你更有意义吗？

根据flexaddicted的评论进行编辑。

你能否建议我一个正确的方法来实现这个目标？有没有方式来覆盖下面的方法？

我认为您不需要覆盖此方法。注释表明为什么DOM元素是以这种方式获取的，而不是在构建区域时通过直接赋值获取，但它应该仍然可以正常使用树结构（因为父母仍然可以正确地确定）。

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