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

cor*_*ded 9 backbone.js marionette

我正在尝试Backbone.Marionette,我很困惑为什么我的Layouts和ItemViews继续生成额外的div.

例如在咖啡btw.

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()
Run Code Online (Sandbox Code Playgroud)

这是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>
Run Code Online (Sandbox Code Playgroud)

这就是它产生的:

<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>
Run Code Online (Sandbox Code Playgroud)

如您所见,它不断为视图和布局生成额外的div.我已经尝试添加el: '#menu'el: '#content'无济于事.

Der*_*ley 8

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

  • 感谢您对此Derick的回复.我正在做同样的事情 - 我希望视图的el是在Layout的区域哈希中定义的选择器.看起来视图标签的定义来自两个方向:从布局和区域视图,无法跳过中间标签. (4认同)
  • 好吧,是的,它是Backbone.View行为.但我们使用Marionette的区域来改进正常的Backbone.Views.这种行为简直不直观,使区域变得不那么有用. (2认同)