Marionette Nested LayoutView не отображается, показывая ошибку «Элемент должен существовать в DOM»

Вот, чего я достиг до сих пор. У меня есть div внутри моего первого шаблона. Когда я показываю другой layoutView внутри этого div. он показывает следующую ошибку.Marionette Nested LayoutView не отображается, показывая ошибку «Элемент должен существовать в DOM»

Uncaught Error: An "el" #nestedDiv must exist in DOM

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

источник

2014-12-07 Naresh Kumar

onShow является обратный вызов на объект марионеток области и не может быть вызывается непосредственно в макете ,

Вы, вероятно, хотите:

1 Зов визуализации() на реализованным LayoutView для того, чтобы сделать шаблон в DOM;
2 Создайте новый вид для отображения в пределах региона, который был определен в LayoutView;
3 Показать представление в регионе. Если вам это нужно, вы можете использовать obj.foo.onShow() в качестве обратного вызова после того, как представление было отображено в пределах региона;

Согласно документации:

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

interactions with Marionette.Region will provide features such as onShow callbacks, etc. Please see the Region documentation for more information.

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

"show"/onShow - Called on the view instance when the view has been rendered and displayed.
"show"/onShow - Called on the region instance when the view has been rendered and displayed.

Sidenote: в случае, если бы соблазн использовать OnRender() (LayoutView простирается от ItemView), дон «т. onRender не означает, что представление присутствует в DOM, а скорее, что оно подготовлено для вставки.

источник

2014-12-07 12:49:26 Trace

Эта ошибка в основном означает, что ваш #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/

источник

2015-04-26 17:55:48 squall3d

Marionette Nested LayoutView не отображается, показывая ошибку «Элемент должен существовать в DOM»

ответ

Смежные вопросы