Backbone.js 项目视图中的额外div和主干中的布局。木偶

我正在尝试主干网。我和木偶弄不明白为什么我的布局和项目视图不断生成额外的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:'#菜单'

和

el:'#内容'

，但没有效果

指定el属性。我认为这会解决问题：

---

这不是因为木偶。默认情况下，主干为您生成一个

类。您可以通过

标记名

属性设置标记。请参阅对该问题的评论，以获取重复的内容。

这是一个很有技巧的解决方法，但jQuery最接近的（）实际上为我完成了这项工作。我没有直接使用返回的

myView.el

，而是使用了

$（myView.el）.closest（“div”）.html（）

——正如我所说的，这是一种黑客行为，但作为一种短期修复方法，它正在起作用。
我正在修改本教程：，它采用嵌套模型，并使用引导创建一个手风琴视图。我想对他的出发点做同样的事情，只使用jQueryUI accordion小部件，这就是我需要返回一个未包装视图的原因——因此使用closest（）进行过滤。

---

除了如上所述添加jqueryUI链接和更改返回的HTML之外，它工作得非常好：

当没有为视图指定

el

或（

tagName

，

id

，

classname

）时，它默认为div标记，这就是原因。可能是#菜单，#内容找不到，也可能是可能的重复。我尝试了这个，得到了一个

未捕获的错误：层次结构\u请求\u错误：DOM异常3

。我认为这可能更像是一个关于ItemView的木偶，但我不确定……这个错误来自jQuery。这意味着您试图在无效位置插入DOM元素。例如，您可能试图将

标记插入到

标记中，这是无效的。我也很难解决这个问题。在指定el属性的2.x更新之前。升级打破了这一点，所以当你说这是一个JQuery问题时，我很困惑。那么它在1.x中是如何工作的呢？我有一个选项卡控件，它在2.x更新中已停止运行，因为我无法生成JQuery想要的DOM结构。更新中发生了什么变化，使得指定el属性停止工作？感谢您对此德里克的回复。我遇到了同样的问题--我希望视图的el是布局的区域散列中定义的选择器。视图标记的定义似乎来自两个方向：布局和区域视图，无法跳过中间标记。@Tres:你有没有想过在显示区域时改变额外行为的方法？@Derick Bailey，Tres的评论是否有效？我已经做了几个小时了，这样会更容易处理好的，是的，这是主干。查看行为。但是我们使用木偶区域来改进正常的主干视图。此行为只是不直观的，使区域变得不那么有用。您可以在视图中使用

onRender

trigger来执行

This.setElement（This.$el.find（'selector'）。唯一的问题是您可能需要为ItemView或/和LayoutView创建一个基类。。。