title: Custom binding on property of item in an observable array, how to access the item?
body: <p><strong>Background</strong></p>
  
  <p>I have a GalleryImages observable array where each item has properties related to an image (name, description, path, ect..). A knockout foreach iterates through the object array to generate spans that contain the image, name, and description. If the user clicks on the image name or description, they can edit the value and press save/cancel to update the view Model. </p>
  
  <p><strong>Question</strong></p>
  
  <p>Given that the custom binding is bound to a property of an item within an observable array, how do you access the item the property belongs to inside the definition of the custom binding? I'd like to grab the item that was just edited and pass it to a function that would update the server with changes.</p>
  
  <p>I tried looking at allBindingsAccessor(), but it returns the property of the item, not the item itself.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div data-bind="foreach: GalleryImages"&gt;
      &lt;span class="img"&gt;
          &lt;a data-bind="attr: { href: URL}"&gt;
              &lt;img data-bind="attr: { src: URL}"/&gt;
          &lt;/a&gt;
          &lt;div&gt;
              &lt;h4 data-bind="text: ItemName"&gt;&lt;/h4&gt;
              &lt;input type="text" data-bind="clickEditor: ItemName"/&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;span data-bind="text: Description"&gt;&lt;/span&gt;
              &lt;textarea data-bind="clickEditor: Description"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>knockoutJS</strong> Here's the custom binding for clickEditor</p>
  
  <pre><code>ko.bindingHandlers.clickEditor = {
      init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
          var $element = $(element).hide();
          var $text = $element.prev();
          var $parent = $element.parent();
  
          var $editElements = $("&lt;div class='editConfirm'&gt; \
              &lt;button class='saveEdit' type='button'&gt;Save&lt;/button&gt; \
              &lt;button class='cancelEdit' type='button'&gt;Cancel&lt;/button&gt; \
          &lt;/div&gt;&lt;span class='placeHolder'&gt;&lt;/span&gt;").hide().insertAfter($element).add($element);
  
          var _toggle = function (edit) {
              $text[edit ? 'hide' : 'show']();
              $editElements[edit ? 'show' : 'hide']();
          };
  
          $text.click(function (e) {
              _toggle(true);              
          });
  
          $editElements.find('.saveEdit').click(function () {
              _toggle(false);
  
              //update clientside viewModel
              valueAccessor()($element.val());
  
              // this var needs to contain the item in the observable array that was updated
              var imageUpdated;
  
              //update server with changes
              saveModel(imageUpdated);
          });
  
          $editElements.find('.cancelEdit').click(function () {
              _toggle(false);
              $(element).val(ko.utils.unwrapObservable(valueAccessor()));
          });
      }
      , update: function (element, valueAccessor) {
          $(element).val(ko.utils.unwrapObservable(valueAccessor()));
      }
  };
  </code></pre>