title: How to delete member of Knockout mapped array generated from JSON returned from ajax call?
body: <p>I'm using knockoutjs and the mapping plugin to generate view models from JSON returned from a server call.  I get an array from the server, create a model which has the mapped array as a property, then data bind the array to a template to render all of the data on screen.  Which works great.</p>
  
  <p>I'd like to have a button rendered next to each item which would allow me to remove it, like in the example in <a href="http://channel9.msdn.com/Events/MIX/MIX11/FRM08" rel="nofollow">this video</a> (see about 14:20).</p>
  
  <p>But in the video he binds to a function defined on the elements of the array.  My elements are generated from the JSON using the mapping plugin, so I'm not sure how I add a function to each element, or if I even want to do that.  Or can I make the click of the button bind to a function on the viewmodel and pass in the id of the element the button is associated with?</p>
  
  <p>my javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var supplierModel;
  
      $(function(){        
          getAllSuppliers();       
      })
  
      function getAllSuppliers(){
          $.getJSON('/SWM60Assignment/allsuppliers',function(responseData){
              supplierModel = new SupplierModel(responseData);
              ko.applyBindings(supplierModel);            
          });
      }
      var SupplierModel = function (supplierList) {
          var self = this;
  
          self.suppliers = ko.mapping.fromJS(supplierList);
          self.remove = function(supplierId){
              // how can I get the buttons to call this method with the id 
              // of the element they are the button for?
              alert('remove called with supplier id:'+supplierId);
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is the template:</p>
  
  <pre><code>&lt;script id="supplierTemplate" type="text/html"&gt;
      &lt;li&gt;
          Name: &lt;span data-bind="text:name"&gt;&lt;/span&gt; Address: &lt;span data-bind="text:address"&gt;&lt;/span&gt;
          &lt;button data-bind="click:&lt;what can I put here to bind correctly&gt;&gt;"&gt;Remove supplier&lt;/button&gt;
      &lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>and the HTML for completeness:</p>
  
  <pre><code>&lt;ul class="vertical" data-bind="template:{name:'supplierTemplate',foreach:suppliers}"&gt;&lt;/ul&gt;
  </code></pre>