O'Reilly logo

Play Framework Essentials by Julien Richard-Foy

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using the JavaScript reverse router

There is a major issue with the preceding JavaScript code; the way it computes the URL of the Items.delete route is very fragile because it duplicates the route definition:

xhr.open('DELETE', '/items/' + btn.dataset.id);

If you change the route definition, you will also have to accordingly change the preceding line of code.

We can solve this issue by putting the route information in the HTML attributes, instead of putting the item ID, as follows:

<li>
  <a href="@routes.Items.details(item.id)">@item.name</a>
  @defining(routes.Items.delete(item.id)) { route =>
  <button class="delete-item"
            data-url="@route.url"
            data-method="@route.method">Delete</button>
  }
</li>

However, in practice, this approach does not scale; in practice, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required