1

我已经建立了一个项目，我在其中扩展了一个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);
}

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

希望很清楚。

4

1 回答 1

1

这是我对此的理解：

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

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

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

这对你来说更有意义吗？

根据 flexaddicted 的评论进行编辑。

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

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

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

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

于 2013-09-03T16:02:58.500 回答