relift-example-stars-wars-simple.html

relift-example-stars-wars-simple.html

<div>
<div class="row">
    <div class="column" id="starWarsWidget">
      <div class="center">
        <span r-if="(this.loadingStatus === 'pending')">
            <div class="spinner">Loading...</div>
        </span>
        <h4 r-else>Welcome to Star Wars</h4>
      </div>
      <div>
        <ul>
          <li r-for="(item,i) in this.peopleList">
              ${item.name} [<a @click="remove" data-index="${i}">+</a>]
            </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<script type="module">
  import reLift from '../src/index.js';
  
  const STARS_WARS_BASE_API = 'https://swapi.co/api';
  const delay = ms => new Promise(res => setTimeout(res, ms));
  
  reLift({
    el: '#starWarsWidget',
    data: {
      peopleList: [],
      loadingStatus: null
    },
    async loadPeople(){
      this.data.loadingStatus = 'pending';
      await delay(5000); // to create a delay effect so we can show the spinner
      const resp = await fetch(`${STARS_WARS_BASE_API}/people/`);
      const data = await resp.json();
      this.data.peopleList = data.results;
      this.data.loadingStatus = 'done';
      console.log('data', this.data.peopleList)
    },
    mounted() {
      this.loadPeople();
    }
  })
</script>