Monaca Onsen UI Discord Chat Github Repo

ons-splitter-side dynamic content



  • Hi,
    Our application requires a side menu (splitter-side) containing a list of dynamic items. The items are loaded by ajax call after the page load. The part of the template looks like this

    <ons-splitter>
         <!-- The side menu -->
         <ons-splitter-side side="right" id="storage-menu" collapse width="220px">
               <ons-page>
                    <ons-list id="storage-help">
                        <ons-list-header>Storage Locations</ons-list-header>
                    </ons-list>
               </ons-page>
          </ons-splitter-side>
    
         <!-- Everything not in the side menu -->
         <ons-splitter-content>
           ....
        </ons-splitter-content>
    </ons-splitter>
    

    Now the ajax (inside $(function(){}), so it’s being run after the page is ready) builds all the list items in a loop:

         storageHelp += `
                 <ons-list-item id="storage-${storageID[i]}-help">
                     ${storageName[i]}
                 </ons-list-item>`;
    

    and the list items are then appended to the ons-list element:

    $('#storage-help').append(ons.createElement(storageHelp));
    

    And that generate error:
    Error: [Onsen UI] HTML template must contain a single root element

    My question is: how can we dynamically build side menu content using ons-splitter-side?

    Many thanks!


  • administrators

    I think the problem with your code is that ons.createElement should take a string of a single element, but the storageHelp string is made of multiple elements ("<ons-list-item>...</ons-list-item>;<ons-list-item>...</ons-list-item>;").

    Instead you should make storageHelp an array of strings (one item in the array for each list item from the AJAX call). Then map the array with ons.createElement and append the results.