Integrating choices.js into Lightning Components

Choices.js serves as a great example to understand how a third-party library might not work under Locker Service, and how to make it compatible with Locker Service. To understand this, let's take the choices.js vanilla code and integrate it into Lightning Components.

The choices.js library can be downloaded from https://github.com/jshjohnson/Choices/blob/master/assets/scripts/dist/choices.js.

The Lightning Component code is as follows:

<aura:component > <ltng:require styles="{!join(',',$Resource.ChoicesJS + '/choicesJS/base.min.css',$Resource.ChoicesJS + '/choicesJS/choices.min.css')}" scripts="{!$Resource.ChoicesJS + '/choicesJS/choices.min.js'}" afterScriptsLoaded="{!c.afterScriptsLoaded}"/> ...

Get Learning Salesforce Lightning Application Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.