data driven behavior

CTP Web CoI

24.04.2014

http://goo.gl/72PSaL

custom data attributes

HTML5
data-* attributes on DOM elements
store custom data private to the page or application
Can be set on nodeType 1:ELEMENT_NODE and 9:DOCUMENT_NODE
Example:

 <div class="person" data-year-of-birth="1952">The Hoff</div>

WHY PRIVATE attributes?!

W3C Code Example:

If a Web page wanted an element to represent a space ship, e.g. as part of a game, it would have to use the class attribute along with data-* attributes:

<div class="spaceship" data-ship-id="92432"
     data-weapons="laser 2" data-shields="50%"
     data-x="30" data-y="10" data-z="90">
 <button class="fire"
         onclick="spaceships[this.parentNode.dataset.shipId].fire()">
  Fire
 </button>
</div>

Notice how the hyphenated attribute name becomes camel-cased in the API.

element.dataset

interface DOMStringMap {
  getter DOMString (DOMString name);
  setter creator void (DOMString name, DOMString value);
  deleter void (DOMString name);
};

"data-" is removed (first five)
"-" is interpreted as separator and name is converted to camelCase
data-foo-bar="" becomes element.dataset.fooBar

jQuery data handling

Reads > caches > stores private data
Initially loads data from attributes with neat logic
Provides simple interface to dataset

<div data-foo-bar="Hello World"></div>
<script>
$('div[data-foo-bar]').each(function(){
 // Obtain data
 var dataFnc = $(this).data.bind($(this));
 console.log(dataFnc('fooBar'));
  
 // Modify data
 dataFnc('fooBar', dataFnc('fooBar').split('').reverse().join(''));
 console.log(dataFnc('fooBar'));
 console.log($(this).attr('data-foo-bar'));
});
</script>

jQuery data attribute conversion

if ( typeof data === "string" ) {
  try {
    data = data === "true" ? true :
    data === "false" ? false :
    data === "null" ? null :
    // Only convert to a number if it doesn't change the string    +data + "" === data ? +data :
    rbrace.test( data ) ? jQuery.parseJSON( data ) :  data;  } catch( e ) {}
    // Make sure we set the data so it isn't changed later  jQuery.data( elem, key, data );} else {
  data = undefined;
}

So what's data driven behavior?!

Develop API for use in HTML with data-* attributes
Build portable behavior based on your information data (HTML)
Create easy to use API that works without any script involvement (declarative style in HTML)
Establish core commons behavior library that can be re-used
Nice interface from back-end into front-end (configuration / initial settings)

CSS: "Here are my two cents!"

Attribute selectors [data-foo-bar*="test"]
Works nicely in conjunction with pseudo elements :before and :after using content: attr(data-foo-bar);
Great for icon fonts: data-icon=";"

Some sample use cases

http://codepen.io/gionkunz/pen/84a541bb2904c08c59f8a517955ae062/

http://codepen.io/gionkunz/pen/8411a0754599b3f003cea2abc8f45a66

http://codepen.io/gionkunz/pen/4b86d528a46e4d25730373d47d472a29

http://codepen.io/gionkunz/pen/8d249c877e4c72da6fbd2e0f78a1d2ef

http://codepen.io/gionkunz/pen/5712ed568968f53694ded0c850cbe8d4

http://codepen.io/gionkunz/pen/da8caf11353e488446441c22de1c5e8d