木偶嵌套布局视图未呈现，显示错误“元素必须存在于 DOM 中”

Marionette Nested LayoutView is not rendering, showing error "Element must be exist in DOM"

本文关键字：元素 存在 DOM 错误 显示 布局 嵌套 视图      更新时间：2023-09-26

这是我迄今为止取得的成就。我的第一个模板中有一个div。 当我在该div内显示另一个布局视图时，它显示以下错误。

未捕获的错误：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>

.JS- 

//Application Object
var myApp = new Marionette.Application({
  regions: {
    main: '#container'
  }
});
//First Model
var TaskModel = Backbone.Model.extend({
  defaults: {
    'heading' : 'Welcome to Backbone'
  }
});
//Second Model
var Person = Backbone.Model.extend({
  defaults: {
    'nestedHeading' : 'This is a subheading.'
  }
});
//View for Div #nestedDiv
var PersonView = Marionette.ItemView.extend({
  template: '#innerTemplate'
});

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

var taskModel = new TaskModel();
var taskView = new TaskView({model:taskModel});
myApp.main.show(taskView);

这是JSBin链接 - http://jsbin.com/dusica/1/edit?html,js,console,output

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

您可能希望：

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

根据文档：

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.layoutview.md

与Marionette.Region的交互将提供以下功能： 显示回调等。请参阅区域文档了解更多信息 信息。

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md

"show"/onShow - 当视图已 呈现和显示。
"show"/onShow - 在该地区调用 实例，当视图已呈现并显示时。

旁注：如果你想使用 onRender(((LayoutView 从 ItemView 扩展(，请不要使用 onRender，并不意味着视图存在于 DOM 中，而是准备插入。

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

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

//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);
  }
});

它适用于： http://jsbin.com/pecoxujose/2/

相关文章：