title: How do I know which object was selected in a select box or is it possible to bind an object to the KnockoutJS view model?
body: <p>I have an array of objects that I have binded to a <code>select</code> HTML element. When the user changes options on the <code>select</code> element, I can bind the value to the KnockoutJS view model. However, I need to map this value back to the original JavaScript object (as I need to access other properties to do perform other logic).</p>
  
  <p>My HTML looks like this.</p>
  
  <pre><code>&lt;select data-bind="options: categories, 
      optionsText: 'name',
      optionsValue: 'id',
      value: selectedCategory,
      optionsCaption: 'Choose...',
      event: { change: categoryChanged }
      "&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>My JavaScript looks like the following.</p>
  
  <pre><code>var categories = [
      { "name" : "color", "id": "1" },
      { "name" : "names", "id": "2" }
  ];
  var Category = function(data) {
      this.name = ko.observable(data.name);
      this.id =  ko.observable(data.id);
  };
  var Value = function(data) {
      this.name = ko.observable(data.name);
  }
  var ViewModel = function(categories, values) {
      var self = this;
      self.categories = ko.observableArray(ko.utils.arrayMap(categories, function(category) {
          return new Category(category);
      }));
      self.selectedCategory = ko.observable();
      self.categoryChanged = function(obj, event) {
          //how do i map back to which category was selected?
          //do i have to loop through?
      };
  };
  var viewModel;
  $(document).ready(function() { 
      viewModel = new ViewModel(categories);
      ko.applyBindings(viewModel);
  });
  </code></pre>
  
  <p>JSFiddle code is at <a href="http://jsfiddle.net/jwayne2978/sx4e2f0r/" rel="nofollow">http://jsfiddle.net/jwayne2978/sx4e2f0r/</a>. </p>
  
  <p>When the user changes selection, I can access which category id was selected through <code>self.selectedCategory</code>, but I now need to map this category id back to an actual <code>Category</code>. I suppose I can iterate over <code>self.categories</code>, but that seems kind of against the purpose of KO. </p>
  
  <p>Is there any way to bind a whole object to the view model? </p>