Kevin, thanks for this. I did find that jquery doc last night, but my head 'sploded before I grokked the namespace part. I did miss that README because I downloaded the zip instead of cloning the repo. Doh! Your explanation combined with the docs you linked to put me in a good place for being able to figure this out tonight. I'm looking forward to me personal coding hours tonight! Thank you! I'll give and update later.
On Wednesday, May 23, 2012 4:34:13 PM UTC-4, Kevin Blakeley wrote: > > 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. >> >
