3. ons-splitter-side dynamic content

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-splitter-side dynamic content

  • M

    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!

    0
  • E
    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.

    0