title: Knock out Drop Down - Using Bool Values
body: <p>I am working on a drop down control that is powered by Boolean values.  I have a viewmodel that consists of the lookup dataset array (values and text attributes) and also a dataset that contains a Boolean value that needs to be aligned with that value chosen in the array.  So data in the viewmodel represents an actual data item, while lookupdata represents essentially a mapping of value pairs.  These two items really need to stay independent of eachother for the purposes of each data item containing only information relevant to it.</p>
  
  <p>I have been able to get a sample working where I brought IsActive outside of the data object as it exists in viewmodel and placed it in viewmodel, however I can't get it to work while it is inside of viewmodel.  I have created a JSFiddle that demonstrates functionally what I want the user to see, as well as one where I have the data where it belongs, but the drop down does not work as expected.</p>
  
  <p>Active maps to true and Inactive maps to false.  Switching between those should also affect the word true/false on the screen.</p>
  
  <p><a href="http://jsfiddle.net/rodearly/xF78A/11/" rel="nofollow">http://jsfiddle.net/rodearly/xF78A/11/</a> </p>
  
  <pre><code>&lt;div data-bind="with: data"&gt;
  &lt;select data-bind="options: $root.lookupData.status, optionsText: 'text', optionsValue: 'value', value: IsActive"&gt;&lt;/select&gt;
  &lt;label&gt;Value: &lt;/label&gt;
  &lt;span data-bind="text: IsActive"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div&gt;Alternative&lt;/div&gt;
  &lt;div&gt;
  &lt;select data-bind="options: lookupData.status, optionsText: 'text', optionsValue: 'value', value: IsActive"&gt;&lt;/select&gt;
  &lt;label&gt;Value: &lt;/label&gt;
  &lt;span data-bind="text: IsActive"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  function Item(id, name) {
  this.id = ko.observable(id);
  this.name = ko.observable(name);
  }
  
  function getLookupData() {
  var lookupData = {};
  lookupData.status = [{
      text: "Active",
      value: true
  }, {
      text: "Inactive",
      value: false
  }];
  
  return lookupData;
  }
  
  
  CreateImplantEditViewModel = function (data, lookupData) {
  var vm = {};
  
  vm.data = ko.observable(data);
  
  vm.IsActive = ko.observable(false);
  
  vm.lookupData = {};
  vm.lookupData.status = ko.observableArray(lookupData.status);
  
  return vm;
  };
  
  debugger;
  
  var editImplantVm = CreateImplantEditViewModel({
      IsActive: false
  },
  getLookupData());
  
  ko.applyBindings(editImplantVm);
  </code></pre>
  
  <p>Thanks for any help,</p>
  
  <p>~David</p>