data driven behavior



CTP Web CoI
24.04.2014
http://goo.gl/72PSaL


<hr data-start-presentation="slide1" />

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="&#x03b;"

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


?

Made with Slides.com