PushState not working
In this example, clicking the link will redirect user to a 404 page.
<a href="/search/ohhyea">search</a>
<script>
bone.router({
routes: {
"/search/:query": "find"
},
find: function(query, data) {
alert(query);
}
});
bone.router.start({pushState: true});
</script>
For pushState it's a little more complicated, in general you need to do something like this:
bone.view('a', {
events: {
'click': 'navigate'
},
navigate: function(event) {
event.preventDefault();
var href = this.$el.attr('href');
bone.router.navigate(href, {trigger: true});
}
});
I might bake this directly into the library, and make it so that you have to turn it off with an option when you start the router. Basically, it says for every a tag, stop the default behavior (asking the server for that url), and instead route the request through the pushState router.
Does that make sense?
Yeah makes sense! I didn't realize there was more leg-work involved. What would be the cost of making pushState completely transparent? For instance, you could pass in a css selector with the pushState property:
bone.router.start({
pushState: true,
linkSelector: 'a.pjax'
});
There's no real cost. I actually think that would be a better way to handle this.
So far I am really loving the simplicity of bone.io. Models and Collections don't have to be de facto interface to your data. They are a level of abstraction that is often a bit overkill. Plus "hot" data FTW!