Index

better-dom Build Status Coverage Status

Live extension playground

NOTE: documentation is currently updating to reflect changes in version 2. If you use 1st version please use v1.7.7 tag.

jQuery knows a concept called “live events”. Using the idea of event delegation they enabled developers to handle existing and future elements. But more flexibility is required in a lot of cases. For example, delegated events fall short when the DOM needs to be mutated in order to initialize a widget. To handle such cases I'd like to introduce live extensions and better-dom - a new library for working with the DOM.

API DOCUMENTATION

Quick start

I'd recommend to read one from the articles below to understand the main ideas of the library: Introduction into the better-dom library in English @smashingmagazine.com Введение в библиотеку better-dom по-русски @habrahabr.ru

Features

Installation

The simplest way is to use bower:

bower install better-dom

This will clone the latest version of the better-dom with dependencies into the bower_components directory at the root of your project. Then just include the script below before the end of <body> on your web page:

<script src="bower_components/better-dom/dist/better-dom.js"></script>

Documentation

Performance

Notes about old IEs

For IE8-9 support you have to incude extra files via the conditional comment below into <head> on your page:

<!--[if IE]>
    <link href="bower_components/better-dom/dist/better-dom.htc" rel="htc"/>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

html5shiv provides a fix for HTML5 tags in IE8.

es5-shim is used to polyfill/fix missed standards-based functions for Array, Object, Function, Date classes.

The better-dom.htc file helps to implement live extensions support. This fact applies several important limitations that you must know in case when legacy browser support is required.

Setup content-type header

HTC behaviors have to serve up with a content-type header of “text/x-component”, otherwise IE will simply ignore the file. Many web servers are preconfigured with the correct content-type, but others are not.

AddType text/x-component .htc

Same domain limitation

IE requires that the HTC file must be in the same domain with as the HTML page which uses it. If you try to load the behavior from a different domain, you will get an “Access Denied” error.

Browser support

Desktop

  • Chrome
  • Safari 6.0+
  • Firefox 16+
  • Opera 12.10+
  • IE8+ (see notes)

Mobile

  • iOS Safari 6+
  • Android 2.3+
  • Chrome for Android

Opera Mini is out of the scope because of lack of support for CSS3 Animations.

better-dom.js

comments powered by Disqus