主干和木偶中的额外包装

Question

使用骨干和木偶，我创建了一个新的布局，进入我页面上的主要内容div。布局看起来像这样：

<div id='dash-sidebar'>
    <div id='dash-profile'></div>
    <div id='dash-nav'></div> 
</div>
<div id='dash-content'></div>

问题是，当我渲染布局时，骨干会自动将其包装在div中，然后将其放入主内容div中，如下所示：

<div id='main-content'>    
  <div>
    <div id='dash-sidebar'>
      <div id='dash-profile'></div>
       <div id='dash-nav'></div> 
    </div>
    <div id='dash-content'></div>
  </div>
</div>

我知道我可以使用tagName更改元素，但是否可以避免完全包装模板，直接将其插入页面上的主内容div中？

Answer 1

更新：木偶。布局是主干视图的扩展，因此这是正常行为，请参阅主干文档：

“el”属性引用在浏览器中创建的DOM对象。每根脊梁。js视图有一个“el”属性，如果未定义，则为主干。js将构造自己的div元素，它是一个空的div元素。

所以我之前的回答与你的问题无关，对不起。

更新：

在Backbone gitHub中发现了一个关于这个主题的问题546（wich被关闭了），jashkenas发布了这条评论来解释为什么它不容易实现：

使用主干视图的很大一部分优势在于，它们的元素在任何时候都是可用的——不管是否呈现了模板（许多视图都有多个模板）——不管视图是否存在于DOM中。

这允许您创建视图并将其添加到DOM中，稍后进行渲染，并确保所有事件都已正确绑定（因为它们是从view.el委派的）。

如果你能想出一个好的策略，允许视图拥有“完整”的模板，同时保留上述特征。。。然后，让我们来讨论它——但它必须允许根元素存在，而不必呈现模板的内容（这可能取决于稍后可能不会到达的数据），并且它必须允许一个视图轻松拥有多个模板。

Answer 2

编辑3：警告！这个答案可能已经过时了。我收到一条评论，说这个答案不再有效，也没有时间调查（我个人不使用这种方法）。

我喜欢使用Twitter/Bootstrap作为我的UI库，由于默认的标记包装（特别是

经过一些挖掘，我在区域的木偶文档中找到了一些关于视图如何附加el的内容。主干从各种视图属性构建el，并使构建的元素保持最新，以便随时呈现。所以我想，如果视图。el是父对象，为什么不使用HTML内容呢？木偶网还提供了一种创建自定义区域的方法

我可以通过创建一个自定义的区域，使用一个覆盖的打开函数来运行一切。这样，我就可以指定哪些区域需要用标记进行换行，哪些区域不需要。在下面的示例代码段中，我创建了我的自定义非包装区域（NowrapRegion），并将其用于我的布局（MyLayout）

var NowrapRegion = Marionette.Region.extend({
  open: function(view){
    this.$el.html(view.$el.html());
  }
});

var MyLayout = Marionette.Layout.extend({
  template: templates.mylayout,
  regions: {
    foo: '#foo',
    columns: '#columns', //thead
    rows: { selector: '#rows', regionType: NowrapRegion } //tbody
  }
});

繁荣我想要的时候包装，不想要的时候不要。

编辑：这似乎会影响在*视图级别应用的事件。我还没有调查过，但请注意，他们似乎没有被触发。

我不确定这是否是一种“正确”的方式。如果@derick bailey看到这一点，我欢迎他提供任何反馈。

编辑2：@chris-neale建议如下，我还没有证实这一点，但它似乎是合理的。谢谢！

在子节点上使用深度克隆将维护事件和数据，而不是在视图中复制html。

var NowrapRegion = Marionette.Region.extend({
  open: function(view){
    view.$el.children().clone(true).appendTo(this.$el);
  }
});

Answer 3

每个主干视图必须由单个元素表示。您的第一个HTML块有两个元素，这就是为什么如果不首先将其包装到外部div中，它就不能由视图表示。

你能重构你的布局，包括主内容区域吗？然后Layout的el将对应于整个外部div。

另一件要尝试的事情是使用骨干。View的setElement（）方法重写外部div的创建，并手动为View中的元素注入所需的超文本标记语言。类似的东西：

onRender: function() {
    this.setElement( /* the HTML you want for your layout */ );
}

但是，如果传入有两个父元素而不是只有一个父元素的超文本标记语言，我不确定这将如何工作。