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 -

//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

來源

2014-12-07 Naresh Kumar

onShow是木偶區域對象上的回調並不能直接調用佈局。

你可能想：

1調用render（）的實例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.

旁註：如果你非常想使用的OnRender（）（LayoutView從ItemView控件擴展），唐「T。 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嵌套的LayoutView不呈現，顯示錯誤「元素必須存在於DOM中」

回答

相關問題