Marionette 중첩 된 LayoutView가 렌더링되지 않습니다. "DOM에 요소가 있어야합니다."오류가 표시됩니다.

여기까지입니다. 첫 번째 템플릿 안에 div가 있습니다. 그 div 안에 다른 layoutView를 보여줄 때. 다음 오류가 표시됩니다.Marionette 중첩 된 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 - http://jsbin.com/dusica/1/edit?html,js,console,output

출처

2014-12-07 Naresh Kumar

onShow은 마리오네트 지역 객체의 콜백과 수 없습니다 - 여기

//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 링크입니다 레이아웃을 직접 호출했습니다. .

당신은 아마 원하는 :

하나를 호출 DOM에서 템플릿을 렌더링하기 위해, 인스턴스화 LayoutView에) (렌더링;
2 새 뷰를 인스턴스화하여 LayoutView에 정의 된 Region 내에서 표시합니다.
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.

(!) 참고 : 당신이 (LayoutView이 ItemView에서 확장)) (하는 onRender 사용하는 유혹 될 경우, 돈 '티. onRender는보기가 DOM에 있음을 의미하는 것이 아니라 삽입 준비가되어 있음을 의미합니다.

출처

2014-12-07 12:49:26 Trace

기본적으로이 오류는 뷰를 표시하려고 할 때 #nestedDiv이 아직 DOM에 없다는 것을 의미합니다. 그리고 그것은 어떤 지역에서도 obj (PersonLayoutView)를 보여주지 않았기 때문에 이해할 수 있습니다.

실제로 다른 중첩 레이아웃보기가 필요하지 않습니다. http://jsbin.com/pecoxujose/2/

: 그것은에서 작동

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

:에 주요 지역에 대한보기를 수정하십시오

출처

2015-04-26 17:55:48 squall3d

Marionette 중첩 된 LayoutView가 렌더링되지 않습니다. "DOM에 요소가 있어야합니다."오류가 표시됩니다.

답변

관련 문제