Backbone和Marionette的额外包装

Question

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

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

问题是当我渲染布局时,Backbone会自动将它包装在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

每个Backbone View必须由单个元素表示.您的第一个HTML块有两个元素,这就是为什么它没有先将它包装在外部div中而无法由视图表示的原因.

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

另一个尝试是使用Backbone.View的setElement()方法来覆盖外部div的创建,并手动为视图中的元素注入所需的HTML.就像是:

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

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

Answer 2

编辑3:警告!这个答案可能已经过时了.我收到一条评论,这个答案不再适用,没有时间调查(我个人不使用这种方法).

我喜欢使用Twitter/Bootstrap作为我的UI库,因为默认的标签包装(特别是<div>在我<tbody>和我之间<tr>),因此在表格样式方面存在一些问题.

经过一番挖掘,我在木偶文件中找到了Region关于如何View附加的东西el.Backboneel从各种View属性构建,并使构建的元素保持最新,以便可以随时呈现.所以我想,如果view.el是父母,为什么不只是使用HTML内容？Marionette还提供了一种创建自定义的方法Region

通过创建Region具有重写open功能的自定义,我能够运行所有内容.这样我可以指定我想用标签包装的区域和我不包含的区域.在下面的示例代码段中,我创建了自定义非换行Region(NowrapRegion)并在my Layout(MyLayout)中使用它<tbody>(我在实际程序中创建<tr>的视图).

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
  }
});

繁荣!当我想要它时包装而在我不需要时包装.

编辑:这似乎影响events在该*View级别应用.我还没有调查过,但要注意它们似乎没有被触发.

不管这是否是"正确"的做法,我不确定.如果他看到这个,我会欢迎来自@ derick-bailey的任何反馈.

EDIT2: @ chris-neale建议如下,我还没有验证这个,但似乎听起来不错.谢谢!

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

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

Answer 3

更新:Marionette.Layout是Backbone视图的扩展,所以这是正常的行为,请参阅主干文档:

"el"属性引用在浏览器中创建的DOM对象.每个Backbone.js视图都有一个"el"属性,如果没有定义,Backbone.js将自己构造,这是一个空的div元素.

所以我以前的回答与你的问题无关,抱歉.

更新:

在Backbone gitHub上发现了一个关于这个主题的问题546(作为wontfix关闭),jashkenas发布了这条评论来解释为什么它不容易实现:

使用Backbone Views的很大一部分优势在于,它们的元素始终可用 - 无论模板是否已经渲染(许多视图都有多个模板) - 无论视图是否存在于DOM与否.

这允许您创建DOM并向其添加视图,稍后呈现,并确保所有事件都正确绑定(因为它们是从view.el委派的).

如果你能想出一个好的策略,允许视图拥有"完整"模板,同时保留上述特性......那么让我们谈谈它 - 但它必须允许根元素存在而不必呈现内容模板(可能依赖于之前可能无法到达的数据),并且必须允许视图轻松拥有多个模板.