title: Knockout select list shows correct number of items, but no text or value
body: <p>I have a weird situation where binding my view model to a select list shows the correct number of rows, but the data shown is empty; correct number of option elements, but each has an empty value and text. Underneath the model is correct; selecting a value works fine and upon save, my view model code saves the correct value. It's just nothing is visible. Binding using a function works though; eg this displays correctly:</p>
  
  <pre><code>&lt;select data-bind="options: promotionLevels, 
                     optionsText: function(item) {
                         return item().description();
                     }, 
                     optionsValue: function(item) {
                         return item().id();
                     },
                     value: promotionLevel, 
                     optionsCaption: 'Choose...'"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>While this doesn't:</p>
  
  <pre><code>&lt;select data-bind="options: promotionLevels, 
                     optionsText: 'description',  
                     optionsValue: 'id', 
                     value: promotionLevel, 
                     optionsCaption: 'Choose...'"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>I'm relatively new to knockout and would love to know what the issue is.</p>
  
  <p>Thanks</p>
  
  <p>[Edit]
  The data, as generated by the server, is:</p>
  
  <pre><code>"promotionLevels":[{"id":"f28391a0-8995-45a4-a360-1dd1ae38861b","description":"Beta"},{"id":"6fb6ad46-fff4-4da8-98ef-4ff469406a6c","description":"Development"},{"id":"f16d044a-4ea6-4001-844e-c8dad6227c04","description":"Production"},{"id":"1da6ac1f-7d31-ba64-fbce-c8623af6464f","description":"QA"},{"id":"bc34a34a-0c89-4215-a001-1ea40433b8a9","description":"Test"}]
  </code></pre>
  
  <p>Dumping the data, once bound via ko, the promotion levels are:</p>
  
  <pre><code>"promotionLevels": [
      {
        "id": "f28391a0-8995-45a4-a360-1dd1ae38861b",
        "description": "Beta",
        "__ko_mapping__": {
          "ignore": [],
          "include": [
            "_destroy"
          ],
          "copy": [],
          "mappedProperties": {
            "id": true,
            "description": true
          }
        }
      },
      {
        "id": "6fb6ad46-fff4-4da8-98ef-4ff469406a6c",
        "description": "Development",
        ...
  </code></pre>
  
  <p>I've tried to jsfiddle this, but the dependencies are too great.</p>
  
  <p>[Edit 2]</p>
  
  <p>The page code is:</p>
  
  <pre><code>    var mapping = {
          promotionLevel: {
              create: function(ctx) {
                  return ko.observable(new Foo.ReferenceDataModel(ctx));
              }
          },
          ...
      };
  
      var viewModel = @Html.Knockout().ToViewModel(this.Model, @&lt;text&gt;mapping&lt;/text&gt;);
      ko.applyBindings(viewModel, $("#endpointEditor")[0]);
  </code></pre>
  
  <p>And the view model code:</p>
  
  <pre><code>Foo.ReferenceDataModel = $.inherit(
  Foo.ViewModelBase,
  {
      __constructor: function(options) {
          this.__base();
  
          if (options &amp;&amp; options.data) {
              ko.mapping.fromJS(options.data, options.mapping || { }, this);
          } else {
              this.id = ko.observable($.generateId());
              this.description = ko.observable();
          }
  
          this.save = function(data, e) {
              var self = this;
              var form = $(e.target).parents("form");
              $.validator.unobtrusive.parse(form);
              if (!$(form).valid()) {
                  return;
              }
  
              if (options.callback) {
                  options.callback(self);
              }
          };
      }
  });
  </code></pre>
  
  <p>This is an application I've inherited and there's a complex set of models, etc. The base view model just adds default error handling.</p>