Javascript 木偶节点嵌套布局视图未渲染，显示错误“；元素必须存在于DOM中；_Javascript_Backbone.js_Marionette

Javascript 木偶节点嵌套布局视图未渲染，显示错误“；元素必须存在于DOM中；

javascript backbone.js

Javascript 木偶节点嵌套布局视图未渲染，显示错误“；元素必须存在于DOM中；,javascript,backbone.js,marionette,Javascript,Backbone.js,Marionette,以下是我迄今为止所取得的成就。我的第一个模板中有一个div。当我在该分区内显示另一个layoutView时，它显示以下错误未捕获错误：DOM中必须存在一个“el”#nestedDiv HTML- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MarionetteJS</title> </head> <bo

以下是我迄今为止所取得的成就。我的第一个模板中有一个div。当我在该分区内显示另一个layoutView时，它显示以下错误

未捕获错误：DOM中必须存在一个“el”#nestedDiv

HTML-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MarionetteJS</title>
</head>
<body>
  <div id="container"><div>

  <script type='text/template' id='myTemplate'>
    <h2><%=heading%></h2>
    <div id='nestedDiv'></div>
  </script>

  <script type='text/template' id='innerTemplate'>
    <h2><%=nestedHeading%></h2>
  </script>

  <script src='_assets/js/_lib/jquery-1.7.2.min.js'></script>
  <script src='_assets/js/_lib/underscore.js'></script>
  <script src='_assets/js/_lib/backbone.js'></script>
  <script src='_assets/js/_lib/backbone.marionette.js'></script>
  <script src='_assets/js/layoutView.js'></script>
</body>
</html>

这里是JSBin链接-

onShow

是对木偶区域对象的回调，不能直接在布局上调用

您可能想：

1对实例化的LayoutView调用render（），以便在DOM中呈现模板
2实例化一个新视图，以在LayoutView上定义的区域内显示
3显示区域内的视图。如果需要，可以在区域内呈现视图后使用obj.foo.onShow（）作为回调

根据文件：

与木偶的交互。区域将提供以下功能关于显示回调等。有关更多信息，请参阅区域文档信息

“show”/onShow-在查看实例时调用该视图呈现和显示。
“show”/onShow-在区域上调用渲染和显示视图时的实例

旁注：如果您想使用onRender（）（LayoutView扩展自ItemView），请不要这样做。onRender并不意味着视图存在于DOM中，而是意味着它已准备好插入

该错误基本上意味着，当您试图显示视图时，您的#nestedDiv尚未在DOM中。这是可以理解的，因为您在任何地区都没有显示obj（个人外景）

实际上，您不需要另一个嵌套的布局视图。考虑将主区域的视图修改为：

//View for main Region
var TaskView = Marionette.LayoutView.extend({
  template : '#myTemplate',
  regions: {
    'personLayoutRegion': '#nestedDiv'
  },
  onShow: function() {
    var person = new Person();
    var personView = new PersonView({model: person});
    this.personLayoutRegion.show(personView);
  }
});

它的工作原理是：

元素可以在实际文档中，但无论出于何种原因，都不能在木偶中。

//View for main Region
var TaskView = Marionette.LayoutView.extend({
  template : '#myTemplate',
  regions: {
    'personLayoutRegion': '#nestedDiv'
  },
  onShow: function() {
    var person = new Person();
    var personView = new PersonView({model: person});
    this.personLayoutRegion.show(personView);
  }
});