在Backbone.Marionette itemviews和布局额外的div(Extra divs

2019-06-25 18:11发布

我尝试Backbone.Marionette,我很困惑,为什么我的布局和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:

这是因为木偶的不是。 骨干生成一个<div>默认类为您服务。 您可以设置通过标签tagName属性。 看到了这个重复的问题的意见。



Answer 2:

哈克解决方法,但jQuery的最接近()实际上做的工作对我来说。 而不是使用返回myView.el直接,我使用$(myView.el).closest("div").html() -正如我所说,哈克,但作为一个短期修复它的工作。
:我用这个教程摆弄http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/comment-page-1/#comment-3801 ,这需要嵌套模型并创建使用自举一个手风琴图。 我想要做同样的他的出发点,只使用jQueryUI的折叠菜单,这是我需要的展开视图回来的原因 - 因此过滤最接近()。
除了添加jQueryUI的链接和改变,因为上述划定返回的HTML,它的工作相当不错: http://dartsleague.parentleafarm.com/superheroes/



Answer 3:

指定您的EL性能。 我认为,这将解决这个问题:

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



文章来源: Extra divs in itemviews and layouts in Backbone.Marionette