Question with Routes using Template

Questions
1

Hi guys!!! I need little help with a question…

My actually code that is:

<template>
<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div>
      <div class="title">Filtre as categorias</div>
      <div class="subnavbar">
        <form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-init">
          <div class="searchbar-inner">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search"/>
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
            <span class="searchbar-disable-button">Cancel</span>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="page-content">
    <p>
      {{#each names}}
            <li>{{this}}</li>
          {{/each}}
    </p>
    <div class="searchbar-backdrop"></div>

    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>Categoria não encontrada</li>
      </ul>
    </div>
    <div class="list search-list searchbar-found">
      <ul>
         {{#each names}}
            <li>{{this}}</li>
          {{/each}}     
      </ul>
    </div>
  </div>
</div>
</template>
<script>  
  return Categories = {    
    data: function () {
      return {        
        names: ['John', 'Vladimir', 'Timo'],
      }
    },
    on: {
      pageInit: function () {
        Category.list(function(json){
          console.log(json.data);
        });
      }
    }
  }
</script>

My question is, how populate the variable “Names” with my return JSON? Or what is the best way to do this?

2

The best way will be to do it using async route where your first request your data and then resolve it with a componentUrl and context:

{
  path: '/some-page/',
  async: function(routeTo, routeFrom, resolve) {
        Category.list(function(json){
          resolve({ componentUrl: 'some-page.html' }, { context: {names: json} })
        });    
  },
}
1 Like
3

I got it… But, if I were to make 3 requests for populated 3 different fields? How will staying? Thanks for support!

4

Then you do 3 requests first and then call resolve :slight_smile:
The router component template is parsed/compiled only on initial page load

5

It’s ?

async(routeTo, routeFrom, resolve, reject) {
      app.preloader.show();
     var json1 = '', json2 = '', json3 = '';
      app.request.json(app.data.url+'api/v1/category/1', {},  function (json) {
        app.preloader.hide();  
        json2 = json;     
      });

     app.request.json(app.data.url+'api/v1/category/2', {},  function (json) {
        app.preloader.hide();
        json1 = json;       
      });

    app.request.json(app.data.url+'api/v1/category/3', {},  function (json) {
        app.preloader.hide();
        json3 = json;       
      });

      resolve({componentUrl: './pages/list-categories.html' }, 
                { context:{ lists: json1, list2: json2, list3:json3  } });
    },
6 
async(routeTo, routeFrom, resolve, reject) {
  app.preloader.show();
  
  var json1, json2, json3;

  function proceed () {
    // wait for all request to complete
    if (!json1 || !json2 || !json3) return;
    app.preloader.hide();  
    resolve(
      { componentUrl: './pages/list-categories.html' },
      { context:{ lists: json1, list2: json2, list3:json3 } }
    );
  }
  app.request.json(app.data.url+'api/v1/category/1', {},  function (json) {
    json2 = json; 
    proceed();
  });

  app.request.json(app.data.url+'api/v1/category/2', {},  function (json) {
    json1 = json;
    proceed();
  });

  app.request.json(app.data.url+'api/v1/category/3', {},  function (json) {
    json3 = json;       
    proceed();
  });
}
2 Likes