UJS

Unobstrusive JavaScript (UJS)

That’s separating markup and HTML, e.g. not putting JS into an onclick attribute but in a detached observer.

Apotomo widgets have built-in support for UJS by providing a capturing #ujs in the view.

Example

A view item_list/display.html.haml might look like

= %ul#itemList
  = %li "Coffee"
  = %li "Peanut Butter"

- ujs do
  "#itemList li".on('click', function() {...});

Page rendering

When the page containing that widget is rendered initially, all ujs blocks are collected in a yield’able :apotomo_ujs variable.

Page update

Often widgets update themselves via AJAX. Apotomo takes care about copying the ujs content to the existing block. So, widgets may invoke ujs over and over again, which should usually result in multiple observers for the same event.

You can

• use your JavaScript framework to prevent double observers
• instruct ujs to render only once, like (REALLY?)

- ujs :once => true do
  ...