title: How to modify object on a click
body: <p>I'm trying to modify an object on a click.  Here's what I have.</p>
  
  <pre><code>&lt;form&gt;
      &lt;ul class="tabs" data-tabs="tabs"  data-bind="template: 'lineTemplate'"&gt;&lt;/ul&gt;
  
      &lt;div class="pill-content" data-bind="template: 'lineDivTemplate'" &gt;&lt;/div&gt;
  &lt;/form&gt;
  
  &lt;script id="lineTemplate" type="text/html"&gt;
      {{each(i, line) lines()}}  
      &lt;li&gt;&lt;a data-bind="click: function() { viewModel.setActive(line) }, attr : { href : '#line' + id() }"&gt;&lt;span style="font-size: 15px;" data-bind="text : model"/&gt;&lt;/a&gt;&lt;/li&gt;
      {{/each}}
  &lt;/script&gt;
  
  
  var viewModel = {       
      lines: ko.observableArray([]),
      setActive : function(line) {                
          **//I need to modify this object**
  
          line.activeTab = true;
      }
  };
  
  $.getJSON("/json/all/lines", { customer_id : customer_id } , function(data) {       
  
      ko.mapping.fromJS(data, null, viewModel.lines);     
  }); 
  
  ko.applyBindings(viewModel);
  </code></pre>
  
  <p>Basically when the user clicks the tab I need it to update the model(and eventually the database) that it is the currently active tab.  The first way I had was the delete the object modify it and then push it back to the array, but pushing adds it to the end of the array, which I don't want.  Thanks for any help.</p>