Created
April 25, 2014 15:50
-
-
Save stephanebachelier/11294186 to your computer and use it in GitHub Desktop.
Marionnette onDomRefresh issue example fix proposal
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var App = new Backbone.Marionette.Application(); | |
| App.addRegions({ | |
| main: '#main' | |
| }); | |
| App.addInitializer(function() { | |
| 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 CollectionView({ | |
| collection: new Backbone.Collection([{ | |
| name: 'foo' | |
| }, { | |
| name: 'bar' | |
| }]) | |
| })); | |
| }, | |
| onDomRefresh: function () { | |
| this.regionManager.forEach(function (region) { | |
| region.currentView.triggerMethod('dom:refresh'); | |
| }); | |
| } | |
| }); | |
| var ItemView = Backbone.Marionette.ItemView.extend({ | |
| template: '#childview-template', | |
| onDomRefresh: function() { | |
| //This won't get called | |
| console.log('ItemView added to DOM!' ); | |
| } | |
| }); | |
| var CollectionView = Backbone.Marionette.CollectionView.extend({ | |
| itemView: ItemView, | |
| onDomRefresh: function() { | |
| //This will get called. | |
| console.log('CollectionView added to DOM!' ); | |
| } | |
| }); | |
| $(document).ready(function() { | |
| App.start(); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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>item #{{name}}</span> | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Marionnette onDomRefresh issue example fix proposal</h1> | |
| <div id="main"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment