test route
This commit is contained in:
parent
b0b2b8020a
commit
216b0658b8
20
index.html
20
index.html
@ -13,7 +13,6 @@
|
||||
<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
|
||||
|
||||
<script type="riot" src="./onzer.riot"></script>
|
||||
<script type="riot" src="./playlists.riot"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
async function fetch_data() {
|
||||
@ -22,26 +21,9 @@
|
||||
});
|
||||
}
|
||||
|
||||
function mountComponent(component) {
|
||||
const app = document.getElementById('app');
|
||||
app.innerHTML = '';
|
||||
riot.mount(app, component);
|
||||
}
|
||||
|
||||
riot.compile().then(async () => {
|
||||
const data = await fetch_data();
|
||||
|
||||
route('/', () => {
|
||||
riot.mount('onzer', { items: data });
|
||||
});
|
||||
|
||||
route('/playlists', () => {
|
||||
riot.mount('playlists');
|
||||
});
|
||||
|
||||
router.start();
|
||||
router.exec();
|
||||
|
||||
riot.mount('onzer', { items: data });
|
||||
});
|
||||
</script>
|
||||
|
||||
|
34
onzer.riot
34
onzer.riot
@ -1,4 +1,18 @@
|
||||
<onzer>
|
||||
|
||||
<router initial-route={state.initialRoute} base={state.base}>
|
||||
<nav>
|
||||
<a each={ page in state.pages } href="/#{ page.id }">
|
||||
{ page.title }
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<route path=":id?">
|
||||
<h1>{getPageById(route).title}</h1>
|
||||
<p>{getPageById(route).body}</p>
|
||||
</route>
|
||||
</router>
|
||||
|
||||
<div class="px-12">
|
||||
<div class="flex-row mb-2">
|
||||
<input id="album" type="button" onclick={click} value="Albums"
|
||||
@ -26,13 +40,27 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const pages = [
|
||||
{ id: "home", title: "Home", body: "Onzer" },
|
||||
{ id: "playlist", title: "Playlist", body: "Onzer" },
|
||||
]
|
||||
|
||||
const initialRoute = `${window.location.hash ? window.location.hash.replace('#', '') : 'home'}`
|
||||
|
||||
export default {
|
||||
components: {
|
||||
router: route.Router;
|
||||
route: route.Route;
|
||||
},
|
||||
state: {
|
||||
placeholder: "Rechercher dans les albums",
|
||||
items: [],
|
||||
search: "albums",
|
||||
filter: undefined,
|
||||
id: undefined
|
||||
id: undefined,
|
||||
pages,
|
||||
initialRoute,
|
||||
base: '/#'
|
||||
},
|
||||
onBeforeMount(props) {
|
||||
this.loadData(props.items);
|
||||
@ -99,6 +127,10 @@
|
||||
},
|
||||
navigateToPlaylists() {
|
||||
route('/playlists');
|
||||
},
|
||||
getPageById(route) {
|
||||
const {id} = route.params
|
||||
return pages.find(page => page.id === id) || pages[0]
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -1,14 +0,0 @@
|
||||
<playlists>
|
||||
<h1>Playlists Page</h1>
|
||||
<p>This is the playlists page. It is currently empty.</p>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// Votre code de composant ici (si nécessaire)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Votre style ici (si nécessaire) */
|
||||
</style>
|
||||
</playlists>
|
Loading…
Reference in New Issue
Block a user