Glimmer DSL for Web Component Attribute Listener & Component Attribute Data-Binding

Glimmer DSL for Web (Fukuoka Award Winning Frontend Framework for Ruby on Rails) versions 0.7.2 & 0.7.3 add new samples to demonstrate the newly added features of Component Attribute Listener and Component Attribute Data-Binding. So, not only could we listen to HTML element events like a select element's onchange event, but now, if you add any attribute to a component, it automatically supports having consumers listen to that attribute's updates by hooking into `on_attributename_update` by convention (this is the Rails Convention Over Configuration principle at play). Additionally, consumers could even automatically data-bind that attribute to a model attribute by using the typical Glimmer approach of <=> for bidirectional data-binding and <= for unidirectional data-binding.

Suppose we have an address type select box.

The address_type_select component code would be something like this:

Now, we can attach a listener to the selected_address_type component attribute without the developer of the component doing anything extra by writing this consumer code:

address_type_select(address_types: ['Home', 'Work', 'Other'], 

                    selected_address_type: 'Home') {

  on_selected_address_type_update do |selected_address_type|

    # Do something

  end

}

Alternatively, we could data-bind the component attribute to a model attribute:

address_type_select(address_types: ['Home', 'Work', 'Other']) {

  selected_address_type <=> [address_type_presenter, :selected_address_type]

}

That opens the door for building higher concepts with components and being able to listen to their attribute changes and data-bind them as if they are basic HTML elements.

New samples:

• Hello, Component Attribute Listeners! 
• Hello, Component Attribute Data-Binding!

Happy Glimmering!