Monaca Onsen UI Discord Chat Github Repo

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 tried

    var 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!


  • administrators

    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!