Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.