Question

这是我到目前为止所取得的成就。我在第一个模板中有一个div。当我在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>

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 Link - http://jsbin.com/dusica/1/edit?html,js,console,output

Answer 1

onShow是Marionette Region对象的回调函数，不能直接在布局上调用。

你可能想：

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

根据文件：

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

与Marionette.Region的互动将提供诸如此类的功能 onShow回调等。请参阅Region文档了解更多信息信息。

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

＆＃34;显示＆＃34; / onShow - 在视图出现时调用视图实例渲染和显示＆＃34;显示＆＃34; / onShow - 呼吁该地区视图已呈现并显示时的实例。

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

Answer 2

当您尝试显示视图时，该错误基本上意味着您的#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/

Marionette Nested LayoutView不呈现，显示错误＆＃34;元素必须存在于DOM＆＃34;

2 个答案: