I was a bit confused as well, but this is what I have been able to gather so far.
Based on a comment from the read me at https://github.com/twitter/bootstrap/tree/master/js , the data api is used so that you can wire up to the plug in without having to write any javascript code. The code you reference for the typeahead is creating an event handler for the focus event of the body and the event will only fire when the target matches the selector that was specified. The selector in this case are the DOM elements that have the typeahead data attribute set. For each of those elements the typeahead jquery component is being initialized. This allows us to specify this markup to use the typeahead component: <input type="text" data-provide="typeahead"> The meaning of focus.typeahead.data-api is a way for you to provide a name space for your event registration. There is a good explanation of the usage in the jQuery docs, http://api.jquery.com/on/ I hope this helps and hope someone will chime in and correct me if I am wrong On Wednesday, May 23, 2012 12:00:01 PM UTC-6, Richard Bronosky wrote: > > I'm trying to create a new Bootstrap plugin but am unclear on how the API > is intended to be used. I have compared the JS source of most of the > plugins to each other and the part I can't figure out is the data-api thing > at the bottom. They all seem to follow this pattern: > > /* TYPEAHEAD DATA-API > * ================== */ > $(function () { > $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', > function (e) { > var $this = $(this) > if ($this.data('typeahead')) return > e.preventDefault() > $this.typeahead($this.data()) > }) > }) > > I don't know the meaning of this "focus.typeahead.data-api" thing. That is > a pretty big blocker for me. I have JS that I can paste into the console > that sets an on("resize") handler, but I don't know the correct way to do > it via a plugin. > > Is there good documentation on this anywhere? > > Please advise. >
