DailyJS

Using jQuery UI with AMD

2014-04-29 00:00:00 +0100 by Alex R. Young

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.