3. PUSH ELEMENT TO TABBAR PAGE

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.

PUSH ELEMENT TO TABBAR PAGE

  • D

    I have the main page with a list of items.
    When you select an item I want it to be another page with two tabs.

    Each item has event click to generate new page (‘details_task.html’)

    //...
taskItem.querySelector('.center').onclick = function() {
        document.querySelector('#myNavigator')
          .pushPage('html/details_task.html',
            {
              animation: 'slide',
              data: {
                element: taskItem
              }
            }
          );
      };
//...

    This is the page ‘details_task.html’

    <ons-page id="detailsTaskPage">
  
  <ons-toolbar>
    <div class="left"><ons-back-button>Back</ons-back-button></div>
    <div class="center">Información ruta</div>
    <div class="right"></div>
  </ons-toolbar>

  <ons-tabbar id="myTabbar" position="auto">
    <ons-tab page="html/infoRouteDetail.html" label="Detalle" active>
    </ons-tab>
    <ons-tab page="html/infoRouteStop.html" label="Parada">
    </ons-tab>
  </ons-tabbar>
  
</ons-page>

    I need to pass information to TAB 'infoRouterDetail.html

    My controller

    myApp.controllers = {

  ////////////
  // Detail //
  ////////////
  detailsTaskPage: function(page) {
    // Get the element passed as argument to pushPage.
    var element = page.data.element;

    // Fill the view with the stored data.
    page.querySelector('#title-input').value = element.data.title;
    page.querySelector('#category-input').value = element.data.category;
    page.querySelector('#description-input').value = element.data.description;
    page.querySelector('#highlight-input').checked = element.data.highlight;
    page.querySelector('#urgent-input').checked = element.data.urgent;

  }
};

    I can load the information into details_taks.html but I can not pass information to the tab page directly.
    Any suggestions?

    0
  • D

    Hi!

    I’ve made it work.
    I do not know if it will be a good solution.
    I created a global variable ($ scope)
    When onsen creates the tab page it calls its controller (detailsTaskPage) and passes the item to the scope.
    When loading the page of the first tab is called its controller(infoRouteDetail), I have the item available thanks to the global scope.

    myApp.controllers = {

  $scope: null,

  detailsTaskPage: function(page) {
    // Get the element passed as argument to pushPage.
    var element = page.data.element.data;
    $scope = element;
  },

  infoRouteDetail: function(page){
    console.log('info route detail')
    console.log($scope)
    page.querySelector('#title-input').value = $scope.title;
  }
};

    If someone has a better solution than please put it!!:+1:

    0