$(".product_pictures .actions .delete").on "click", -> do_something_useful
The problem with above code is that class names in the html markup was meant for web design. By using css class for functional work, I have made both the design team and the front end development team perpetually terrified of change.
Class is meant for CSS
If designer wants to change markup from
<div class='first actions'>xxx<div>
<div class='first actions-items'>xxx<div>
There has to be a better way which clearly separates the design elements from functional elements.
data-behavior to rescue
data-behavior usage can be best understood by an example.
# no data-behavior $(".product_pictures .actions .delete").on "click", ->
# code with data-behavior $('[data-behavior~=delete-product-picture]').on 'click', ->
The html markup will change from
<%= link_to '#', class: 'delete', "data-action-id" => picture.id do %>
<%= link_to '#', class: 'delete', "data-action-id" => picture.id, 'data-behavior' => 'delete-product-picture' do %>
Above code would produce html code something like this
<a class="delete" data-action-id="" data-behavior="delete-product-picture" href="#"> <button>Delete</button> </a>
More usage of data-behavior