DailyJS

Using jQuery UI with AMD

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

libraries jquery jqueryui amd

Using jQuery UI with AMD

Posted by Alex R. Young on .
Featured

libraries jquery jqueryui amd

Using jQuery UI with AMD

Posted by Alex R. Young on .

As of version 1.11 you can use AMD with jQuery UI. RequireJS will work, or any other AMD compatible loader.

That means you can do this:

require(['jquery-ui/autocomplete'], function(autocomplete) {  
  autocomplete({ source: ['One', 'Two', 'Three'] }, '<input>')
    .element
    .appendTo('body');
});

Doesn't that look a lot better than what we had before (script tags, monolithic $)? The old Autocomplete style would have used $(selector).autocomplete, which is low on syntax but high in coupling. Even though Autocomplete's API is always going to be coupled to jQuery, I prefer the idea of being able to load it in a modular way, and to potentially be able to inject a different dependency.

The jQuery/jQuery UI stack is still more monolithic than some of the newer MVVM or component-based solutions, but this may help you use some AMD-based techniques with your existing jQuery UI projects.

Also, I know there's always someone who wants to point out how great Dojo is, so here's Dojo's AMD post from 2011.