Question

我正在尝试Backbone.Marionette，我很困惑为什么我的Layouts和ItemViews不断产生额外的div。

例如在咖啡顺便说一句。

AppLayout = Backbone.Marionette.Layout.extend
  template: "#my-layout",

  regions:
    menu: "#menu",
    content: "#content"

MyMenuView = Backbone.Marionette.ItemView.extend
  template: '#project_wiz_nav_template'

MyContentView = Backbone.Marionette.ItemView.extend
  template: '#project_setup_template'

MyApp = new Backbone.Marionette.Application()

MyApp.addRegions
  mainRegion: '#project'

MyApp.addInitializer ->
  layout = new AppLayout()
  MyApp.mainRegion.show(layout)

  layout.menu.show(new MyMenuView())
  layout.content.show(new MyContentView())

MyApp.start()

这是index.html包含的内容：

<div id='project'></div>
<script type='text/template' id='project_wiz_nav_template'> <h2>HI</h2> </script>
<script type='text/template' id='project_setup_template'> <h2>WORLD</h2> </script>
<script id="my-layout" type="text/template">
  <h2>Hello!</h2>
  <div id="menu"></div>
  <div id="content"></div>
</script>

这就是它产生的：

<div id="project">
  <div>
    <h2>Hello!</h2>
    <div id="menu">
      <div> 
        <h2>HI</h2> 
      </div>
    </div>
    <div id="content">
      <div> 
        <h2>WORLD</h2> 
      </div>
    </div>
  </div>
</div>

正如您所看到的，它不断为视图和布局生成额外的div。我尝试添加el: '#menu'和el: '#content'无济于事。

Answer 1

这不是因为木偶。 Backbone默认为您生成<div>类。您可以通过tagName属性设置代码。请参阅有关此问题重复的问题的评论。

Answer 2

一个hacky解决方法，但jQuery最接近的（）实际上为我做了这个工作。而不是直接使用返回的myView.el，我正在使用$(myView.el).closest("div").html() - 正如我所说，hacky，但作为一个短期修复，它正在工作。
我正在修改这个教程：http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/comment-page-1/#comment-3801，它采用嵌套模型并使用Bootstrap创建一个手风琴视图。我想用他的起点做同样的事情，只使用jQueryUI手风琴小部件，这就是我需要一个未包装的视图回来的原因 - 因此使用nearest（）进行过滤。
除了添加jqueryUI链接和更改上面描述的返回HTML之外，它还运行得很好：http://dartsleague.parentleafarm.com/superheroes/

Answer 3

指定您的el属性。我想这会解决它：

http://documentcloud.github.com/backbone/#View-el

Backbone.Marionette中项目视图和布局中的额外div

3 个答案: