title: Using multiple templates and bindings in a single view
body: <p>I am using KnockoutJS to display a list of images. Say I am using a template X to show this list, and I have defined another template Y to display details in a separate dialog of a selected image. I am facing issues binding the selected image with this detail template Y. Below is a mock/partial code of my actual view</p>
  
  <p>ViewModel:</p>
  
  <pre><code>var viewModel {
      photos:ko.observableArray(//list of photos),
      showDetails:function(item){
          //show the details of the selected image in dialog
      }
   };
  </code></pre>
  
  <p>The binding is applied as </p>
  
  <pre><code> ko.applyBindings(viewModel);
  </code></pre>
  
  <p>This is how X is defined</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script id="X" type="text/html"&gt;
    {{each(i,item) photos()}}
        &lt;a href="javascript:;" data-bind="click:function(){showDetails(item);}"&gt;show Image&lt;/a&gt;
    {{/each}}
  &lt;/script&gt;
  </code></pre>
  
  <p>This is how the template is applied</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;div class="list" data-bind="template: {name:'X'}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This is a mockup of template Y</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;script id="Y" type="text/html"&gt;
     &lt;img src="{url}" /&gt;
   &lt;/script&gt;
  </code></pre>
  
  <p>How should I define the showDetails function to apply the bindings to template Y?</p>