From 3213f3f967a866be4b359d43e3e570dfbf0bd77b Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@jshjohnson.com>
Date: Mon, 7 Nov 2016 13:53:56 +0000
Subject: [PATCH] Update documentation

---
 README.md  | 13 ++++++++-----
 index.html |  6 +++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index bfeab90..11ba237 100644
--- a/README.md
+++ b/README.md
@@ -376,6 +376,9 @@ classNames: {
 
 **Usage:** Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation.
 
+## Callbacks
+**Note:** For each callback, `this` refers to the current instance of Choices. This can be useful if you need access to methods (`this.disable()`) or the config object (`this.config`).
+
 ### callbackOnInit
 **Type:** `Function` **Default:** `null`
 
@@ -422,7 +425,7 @@ const example = new Choices(element, {
 **Usage:** Function to run each time an item is unhighlighted.
 
 ### callbackOnCreateTemplates
-**Type:** `Function` **Default:** `null` **Arguments:** `instance, template`
+**Type:** `Function` **Default:** `null` **Arguments:** `template`
 
 **Input types affected:** `text`, `select-one`, `select-multiple`
 
@@ -432,19 +435,19 @@ const example = new Choices(element, {
 
 ```js
 const example = new Choices(element, {
-  callbackOnCreateTemplates: function (instance, template) {
-    var classNames = instance.config.classNames;
+  callbackOnCreateTemplates: function (template) {
+    var classNames = this.config.classNames;
     return {
       item: (data) => {
         return template(`
-          <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}"  data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
+          <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
             <span>&bigstar;</span> ${data.label}
           </div>
           `);
       },
       choice: (data) => {
         return template(`
-          <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${instance.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
+          <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
               <span>&bigstar;</span> ${data.label}
             </div>
           `);
diff --git a/index.html b/index.html
index b89011d..a732804 100644
--- a/index.html
+++ b/index.html
@@ -429,8 +429,8 @@
       });
 
       var customTemplates = new Choices(document.getElementById('choices-custom-templates'), {
-        callbackOnCreateTemplates: function (instance, strToEl) {
-          var classNames = instance.config.classNames;
+        callbackOnCreateTemplates: function (strToEl) {
+          var classNames = this.config.classNames;
           return {
             item: (data) => {
               return strToEl(`
@@ -441,7 +441,7 @@
             },
             choice: (data) => {
               return strToEl(`
-                <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${instance.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
+                <div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
                     <span style="margin-right:10px;">👉🏽</span> ${data.label}
                   </div>
                 `);