Ractive.js and routing? It's pretty simple actually, no magic needed.
<!-- main.js -->
{{# route('/') }}<home />{{/}}
{{# route('/about') }}<about />{{/}}
{{# route('/404') }}<not-found />{{/}}
<script>
component.exports = {
data: {
route: function(path){
// Your pattern matching algorithm here. Return true if match.
// You can use location.pathname, location.search and location.hash
}
},
components: {
home: /* home constructor */,
about: /* about constructor */,
'not-found': /* not-found constructor */,
}
};
</script>
You have other options, like computed properties:
{{# isHome }}<home />{{/}}
{{# isAbout }}<about />{{/}}
{{# isNotFound }}<not-found />{{/}}
<script>
function router(path){
return function(){
// Your pattern matching algorithm here. Return true if match.
// You can use location.pathname, location.search and location.hash
}
}
component.exports = {
computed: {
isHome: router('/'),
isAbout: router('/about'),
isNotFound: router('/404'),
},
components: {
home: /* home constructor */,
about: /* about constructor */,
'not-found': /* not-found constructor */,
}
};
</script>
As for passing down the data, you also have a lot of options. You can use oninit that runs when the component is created and ready to render (or in this case, when a section becomes truthy, ie. {{# isHome }} when isHome is true). Here's an example of <home /> fetching data oninit:
<!-- home.js -->
<h1>Home</h1>
<div>{{someDynamicData}}</div>
<script>
var SomeDataStore = require('stores/some-data-store');
component.exports = {
oninit: function(){
// Let's say your data comes from an AJAX call
$.get(...).then(function(response){
this.set('someDynamicData', response);
}.bind(this));
// Or say it's from a listenable data store (like Reflux)
SomeDataStore.listen(function(){
this.set('someDynamicData', SomeDataStore.getSomeDynamicData());
});
}
}
</script>
Or you can have the routing component fetch and pass it down (and the routing component "owns" the data). This works well with the computed approach since you can observe computed values and fetch when the appropriate view appears.
<!-- main.js -->
{{# isHome }}<home data="{{homeData}}" />{{/}}
{{# isAbout) }}<about data="{{aboutData}}" />{{/}}
{{# isNotFound }}<not-found data="{{notFoundData}}" />{{/}}
<script>
component.exports = {
...
oninit: function(){
this.observe('isHome', function(isHome){
if(!isHome) return;
// still the same here, you can use any data source, as long as you
// set to a data property in the end
this.get(...).then(function(response){
this.set('homeData', response);
}.bind(this));
});
this.observe('isAbout', function(isAbout){
if(!isAbout) return;
...
});
}
};
</script>
