Using Tags Input JQuery plugin with Aurelia

I have been experimenting with Aurelia for some time now, and I am pretty impressed by the simplicity of this framework. It’s pretty easy to pick up the basics of Aurelia and start building Single Page applications in pure JavaScript.

Use Case

In this post I would like to show you how to import an existing JQuery plugin called tag-it to our Aurelia application.

This is a tags input plugin that I have used in my other JQuery applications to show each tags with its own delete link, but the form sees it as a comma delimited set of tags.

In this example, we will create a tag-it component as a custom element. Custom element is Aurelia’s way to create re-usable HTML components. This is usually created as a view-model/view pair that can be imported to our main html page and componentized. Since our original tag-it plugin depends on JQuery , JQuery-UI and CSS plugin, install these using JSPM.

jspm install jquery
jspm install jquery-ui
jspm install css

Now we have to install the tag-it plugin itself. Since the plugin is not in the jspm registry, we will have to write an override (a “shim”) that defines the dependencies and installs our plugin. Shims allows us to specify dependencies for specific files in a project. This is how we create a shim for tag-it plugin.

jspm install github:aehlke/tag-it -o “{ registry: ‘jspm’, main: ‘js/tag-it’, shim: { ‘js/tag-it’: { deps…