Load page from one template and add content from another template
-
Hello,
I would like to reuse a template containing an ons-page and an ons-toolbar, rather than putting the same ons-toolbar code into every html page.
Is that possible?I have this template in a separate html file:
<ons-page id="pageTemplate"> <ons-toolbar fixed-style> <div class="left appDefaultColors"> <ons-toolbar-button onclick="App.showMenu()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div id="pageTitle" class="center appDefaultColors bold">AppTitle</div> </ons-toolbar> <div id="contentFromTemplate">Content from another template here.</div> </ons-page>
I load the page in an <ons-splitter/> like this:
var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load("pageTemplate.html") .then(menu.close.bind(menu));
I would like to set the innerHTML of the “contentFromTemplate” div - or use some other method to dynamically add content.
It seems to me that the easiest way would be to change the ons-page id at this point. Then I could handle everything else on the init event.
I triedvar content = document.querySelector('ons-splitter-content')
right after content.load. But the content has still the old page content at this point.
How can I get a handle on the page which has just been loaded? Or is my approach completely wrong and I should use a different pattern?
Thanks for any help!
-
Are you not able to get a reference to the loaded content in the callback promise from
content.load
?content.load("pageTemplate.html") .then( // <----- can you get a reference to the content in here? );
What is
document.querySelector
returning if you call it in the promise callback?
-
@emccorson
Thanks a lot, you are right, I used the promise wrong.
For others who have the same problem, here is how it looks for me now:var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load("pageTemplate.html") .then(function() { var page = document.querySelector('ons-splitter-content').lastChild; page.setAttribute('mode','firstpage'); //this is used to know which content should be filled into the template. menu.close(); });
That works for me. Thank you!