title: Know which element was clicked when using source/template binding?
body: <p>My HTML:</p>
  
  <pre><code>&lt;ul style="padding-left: 0px;" data-template="GallaryTemplate" data-bind="source: Job.Images"&gt;&lt;/ul&gt;
  &lt;script id="GallaryTemplate" type="text/x-kendo-template"&gt;
      &lt;li style="display: inline"&gt;
          &lt;img data-bind="attr: { src: Path }, click: clickHandler" style="width: 50px; height: 75px;" /&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>My view model:</p>
  
  <pre><code>{
     "ActiveImage":0,
     "Job":{
        "JobUID":100,
        "PatientFirstName":"Corey",
        "PatientLastName":"Ogburn",
        "PatientGender":1,
        "Images":[
           {
              "ImageUID":1,
              "JobUID":100,
              "Path":"/data/A.png"
           },
           {
              "ImageUID":2,
              "JobUID":100,
              "Path":"/data/B.png"
           },
           {
              "ImageUID":3,
              "JobUID":100,
              "Path":"/data/C.png"
           }
        ]
     },
     clickHandler: function() {...}
  }
  </code></pre>
  
  <p>For my generically named <code>clickHandler</code>, how can I get the index of which image I'm clicking on? Knockout had a <code>$index</code>, what's the Kendo equivalent?</p>