bone.io icon indicating copy to clipboard operation
bone.io copied to clipboard

PushState not working

Open dsteinbach opened this issue 12 years ago • 4 comments

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>

dsteinbach avatar Aug 08 '13 20:08 dsteinbach

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?

techpines avatar Aug 08 '13 21:08 techpines

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'
});

dsteinbach avatar Aug 08 '13 21:08 dsteinbach

There's no real cost. I actually think that would be a better way to handle this.

techpines avatar Aug 08 '13 21:08 techpines

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!

dsteinbach avatar Aug 08 '13 22:08 dsteinbach