Backbone 和 Marionette 中的额外包装 [英] Extra wrappers in Backbone and Marionette

问题描述

使用 Backbone 和 Marionette，我创建了一个新布局，该布局进入我页面上的主要内容 div.布局如下:

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

问题在于，当我渲染布局时，Backbone 会自动将其包装在一个 div 中，然后再将其放入主内容 div 中，如下所示:

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

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

解决方案

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

您能否重构您的布局以包括 main-content 区域?然后布局的 el 将对应于整个外部 div.

要尝试的另一件事是使用 Backbone.View 的 setElement() 方法来覆盖外部 div 的创建，并手动为视图中的元素注入所需的 HTML.类似的东西:

onRender: function() {this.setElement(/* 布局所需的 HTML */);}

但是，如果您传入具有两个父元素而不是一个父元素的 HTML，我不确定这会如何工作.

Using Backbone and Marionette, I've created a new layout that goes into the main content div on my page. The layout looks like this:

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

The issue is that when I render the layout, Backbone automatically wraps it in a div before putting it into the main content div like this:

<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>

I know that I can change the element with tagName, but is it possible to avoid wrapping the template altogether and just insert it directly into the main content div on the page?

解决方案

Each Backbone View must be represented by a single element. Your first HTML block has two elements, which is why it cannot be represented by a view without first wrapping it in an outer div.

Could you refactor your Layout to include the main-content area as well? Then the Layout's el would correspond to the entire outer div.

Another thing to try would be using Backbone.View's setElement() method to override the creation of the outer div, and manually inject the HTML that you want for the element in a View. Something like:

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

I'm not sure how this would work if you passed in HTML that had two parent elements instead of just one, however.

这篇关于Backbone 和 Marionette 中的额外包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！