javascript - 重写 Backbone.Marionette 中 Marionette.Region 的 getEl 方法

Question

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

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

特别是，我使用 data-region 选择器来注入(inject)我感兴趣的 View 。

当在树结构中使用这样的布局时， View 会重复，因为 getEl 函数定位了错误的区域来注入(inject) View 。显然这是我的错，在 Marionette (v1.1.0) 文档中编写了以下内容。

override the getEl function if we have a parentEl this must be overridden to ensure the selector is found on the first use of the region. if we try to assign the region's el to parentEl.find(selector) in the object literal to build the region, the element will not be guaranteed to be in the DOM already, and will cause problems

其中 getEl 定义为

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

所以，我的问题如下。这是什么意思？我怎样才能覆盖这个方法？执行此类覆盖的正确位置在哪里？

希望一切都清楚。

Answer 1

这是我对此的理解:

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

换句话说，第一次使用区域时(例如，调用 show 方法)，Marionette 需要构建一个区域实例并将其与正确的 DOM 元素关联(由选择器属性)。

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

这对你来说更有意义吗？

根据 flexaddicted 的评论进行编辑。

Could you suggest me a the correct way to achieve this? Is there any manner to override the method below?

我认为您不需要重写此方法。注释指出了为什么在构建区域时以这种方式获取 DOM 元素而不是直接赋值，但它仍然应该与树结构一起正常工作(因为仍然可以正确确定父级)。

我认为问题可能出在您的区域选择器上:因为它是“通用”的，所以它可能会匹配多个元素(而不是使用仅匹配 1 个元素的 id 属性进行选择) ，并且可能匹配您不期望的 DOM 元素，例如 subview 。 (这当然取决于 Marionette 何时查看 DOM 来获取选择器。)

此外，如果可能的话，我会考虑使用复合 View 来满足您的树结构需求。请参阅http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/和 http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/