How to dynamicaly create ons-tabbar in page

Question

I am trying to generate tabbar pages dynamically in my app. I tried generate elements with ons.createElement() and document.createElement(). But it don't render the pages. Only tabbar, or first page and not the second. Do you know how to dynamicaly render tabbar in onsen ui?

I am using Onsen UI v2.10.8

Many thanks and have a nice day.

EDIT Last code I tried:

RenderTabButtons(view, $page, cb) {
    let data = [];
    let onsEle = `
      <ons-tab
        id="rdMainTab"
        page="rdMain.html"
        label="Main"
        icon="ion-home, material:md-home"
        active
      >
      </ons-tab>
    `;
    data.push(onsEle);
    let onsMapEle = null;
    if (view.mapVisible) {
      onsMapEle = `
        <ons-tab
          id="rdMapTab"
          page="rdDetailMap.html"
          label="Map"
          icon="ion-home, material:md-home"
        >
        </ons-tab>
      `;
      data.push(onsMapEle);
    }

    let wrap = `
      <ons-tabbar
        swipeable
        position="auto"
        id="reservation-detail-tabbar"
        class="x-margin-top"
      >`;
    for (let a = 0; a < data.length; a++) {
      wrap += data[a];
    }
    wrap += '</ons-tabbar>';

    $page[0].appendChild(ons.createElement(wrap));
    cb();
  }

I will try to clean up last experiments, little bit and will post it. — Symorp, Aug 02 '19 at 08:40
@Hkachhia Added last code i tried, but I am also open to new ways to solve this — Symorp, Aug 02 '19 at 08:56

score 0 · Answer 1 · answered Aug 02 '19 at 08:41

0

Yes, that works fine. Just append it to the element with the class name "tab-bar" and don't forget to run ons.compile() on the element:

var $tab = $('<ons-tab  label="Label" ></ons-tab>');
$('.tab-bar').append($tab);
ons.compile($tab[0]);



<ons-tabbar>
  <ons-tab label="Tab 1" active></ons-tab>
  <ons-tab label="Tab 2"></ons-tab>
</ons-tabbar>

answered Aug 02 '19 at 08:41

Rishab

1,484
2
11
22

Ah sorry I forgot, I am using version 2 which looks like don't have method compile. – Symorp Aug 02 '19 at 09:31

How to dynamicaly create ons-tabbar in page

1 Answers1