brettjonesdev/app.js

## app.js
var App = new Backbone.Marionette.Application();

App.addRegions({
    main: '#main'
});

App.addInitializer(function() {
    console.log('here');
    App.main.show(new MainLayout())
});


var MainLayout = Backbone.Marionette.Layout.extend({
    template: '#main-layout-template',
    regions: {
        region1: '#region1'
    },
    //if I put this region1.show() call inside onShow(), the onDomRefresh for the childview triggers. If it is called in onRender, it never triggers.
    //This is because $(document).contains(view.$el); is false, because at show()-time for the ChildView, its parent has not yet been added to the DOM
    //It would be really great if Marionette.Layout could trigger a dom refresh event check on children view (i.e. the currentView of its regions) in
    //its own "show" event - this would make a child view's onDomRefresh much more robust and reliable.  It is fairly common (at least for us) to
    //have a Layout or similar parent view "show" its Children before it is itself "shown".  This would be a great feature if a parent's show event
    //could trigger dom refresh checks on its children views.
    onRender: function() {
        this.region1.show(new ChildView())
    }
});

var ChildView = Backbone.Marionette.ItemView.extend({
    template: '#childview-template',
    onDomRefresh: function() {
        //This never gets called if the view is shown inside a parent/layout view's onRender() method - only if called within the onShow() method.
        console.log('ChildView added to DOM!' );
    }
});

$(document).ready(function() {
    App.start();
})

## index.html
<html>
<head>
    <title>Marionette onDomRefresh issue example</title>
    <script type="text/javascript" src="src/libs/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="src/libs/underscore.js"></script>
    <script type="text/javascript" src="src/libs/backbone.js"></script>
    <script type="text/javascript" src="src/libs/backbone.marionette.js"></script>
    <script type="text/javascript" src="src/libs/Handlebars.js"></script>
    <script type="text/javascript" src="src/app.js"></script>

    <script id="main-layout-template" type="text/html">
        <h3>Main Layout</h3>
        <div id="region1"></div>
    </script>

    <script id="childview-template" type="text/html">
        <span>This is an ChildView</span>
    </script>

</head>
<body>
<h1>Marionnete onDomRefresh issue example</h1>
<div id="main"></div>
</body>
</html>
	var App = new Backbone.Marionette.Application();

	App.addRegions({
	main: '#main'
	});

	App.addInitializer(function() {
	console.log('here');
	App.main.show(new MainLayout())
	});


	var MainLayout = Backbone.Marionette.Layout.extend({
	template: '#main-layout-template',
	regions: {
	region1: '#region1'
	},
	//if I put this region1.show() call inside onShow(), the onDomRefresh for the childview triggers. If it is called in onRender, it never triggers.
	//This is because $(document).contains(view.$el); is false, because at show()-time for the ChildView, its parent has not yet been added to the DOM
	//It would be really great if Marionette.Layout could trigger a dom refresh event check on children view (i.e. the currentView of its regions) in
	//its own "show" event - this would make a child view's onDomRefresh much more robust and reliable. It is fairly common (at least for us) to
	//have a Layout or similar parent view "show" its Children before it is itself "shown". This would be a great feature if a parent's show event
	//could trigger dom refresh checks on its children views.
	onRender: function() {
	this.region1.show(new ChildView())
	}
	});

	var ChildView = Backbone.Marionette.ItemView.extend({
	template: '#childview-template',
	onDomRefresh: function() {
	//This never gets called if the view is shown inside a parent/layout view's onRender() method - only if called within the onShow() method.
	console.log('ChildView added to DOM!' );
	}
	});

	$(document).ready(function() {
	App.start();
	})
	<html>
	<head>
	<title>Marionette onDomRefresh issue example</title>
	<script type="text/javascript" src="src/libs/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="src/libs/underscore.js"></script>
	<script type="text/javascript" src="src/libs/backbone.js"></script>
	<script type="text/javascript" src="src/libs/backbone.marionette.js"></script>
	<script type="text/javascript" src="src/libs/Handlebars.js"></script>
	<script type="text/javascript" src="src/app.js"></script>

	<script id="main-layout-template" type="text/html">
	<h3>Main Layout</h3>
	<div id="region1"></div>
	</script>

	<script id="childview-template" type="text/html">
	<span>This is an ChildView</span>
	</script>

	</head>
	<body>
	<h1>Marionnete onDomRefresh issue example</h1>
	<div id="main"></div>
	</body>
	</html>