batman.js data-route adding characters to url

Question

I have a html template doing this.

<ul id="things">
  <li data-foreach-thing="Thing.all" data-mixin="animation">
    <a data-route="routes.things[thing].new" data-bind="thing.id"></a>
  </li>
</ul>

The data-route attribute is returning a url like this:

http://localhost:3000/#!/things/new

I don't know why it is adding the #!

I'm using batman.js 0.9 with rails 3.1

Any help figuring this out is be appreciated, thanks.

Answer 1

Here's a good description of hash bang urls hash bang urls. This is normal for batman to do this (pretty much all javascript frameworks do this). You can enable "pushstate:true" which will disable it (however it will fall back to hash bang if you're on a legacy browser).

Regarding your batman.js view not being rendered, I ran into a similar issue. I didn't have an error in my chrome console, however the view wasn't being rendered. You need to make sure you have a data-yield attribute for your view to attach to.

For example:

<div id="container" data-yield="main">
</div>

Excerpt from batman.js github:

Now when you navigate to /#!/faq/what-is-art, the dispatcher runs this faq action with {questionID: "what-is-art"}. It also makes an implicit call to @render, which by default will look for a view at /views/app/faq.html. The view is rendered within the main content container of the page, which is designated by setting data-yield="main" on some tag in the layout's HTML. You can prevent this implicit rendering by calling @render false in your action.

Are you trying to show a link to the show action for the thing? It should look like this if you are:

<ul id="things">
  <li data-foreach-thing="Thing.all" data-mixin="animation">
    <a data-route="routes.things[thing]" data-bind="thing.id"></a>
  </li>
</ul>

Here's an example of some code I'm using (the order of the data- attributes doesn't matter):

  <div data-foreach-section="sections" data-mixin="animation">
    <a data-bind="section.SectionId" data-route="routes.sections[section]"></a>
    <p data-bind="section.Name"></p>
  </div>