I've got the following simple setup in knockout

var data = { 
  'Divisions': [
    { 'divID' : '105' },
    { 'divID' : '103' }
  ]
};

var viewModel = ko.mapping.fromJS(data);

ko.applyBindings(viewModel);

and the following HTML that does not properly bind

<select data-bind="
  options: Divisions, 
  optionsText: divID,
  optionsCaption: 'Choose...'">
</select>

onload I get 'ReferenceError: divID is not defined'.

If I use the following binding, it works

<select data-bind="
  options: Divisions, 
  optionsText: function(item) { 
    return item.divID(); 
  }, 
  optionsCaption: 'Choose...'">
</select>

For reference:

Working binding in jsbin, with the ugly binding

Non working version in jsbin that looks like it should work, with the clean binding

I suspect that this is all being caused by ko.mapping.fromJS making every child in Divisions an observable, thus making it so that I can't simply access everything as a simple property name, but I just found a similar example that is doing the exact same thing!

I've got the following simple setup in knockout

var data = { 
  'Divisions': [
    { 'divID' : '105' },
    { 'divID' : '103' }
  ]
};

var viewModel = ko.mapping.fromJS(data);

ko.applyBindings(viewModel);

and the following HTML that does not properly bind

<select data-bind="
  options: Divisions, 
  optionsText: divID,
  optionsCaption: 'Choose...'">
</select>

onload I get 'ReferenceError: divID is not defined'.

If I use the following binding, it works

<select data-bind="
  options: Divisions, 
  optionsText: function(item) { 
    return item.divID(); 
  }, 
  optionsCaption: 'Choose...'">
</select>

For reference:

Working binding in jsbin, with the ugly binding

Non working version in jsbin that looks like it should work, with the clean binding

I suspect that this is all being caused by ko.mapping.fromJS making every child in Divisions an observable, thus making it so that I can't simply access everything as a simple property name, but I just found a similar example that is doing the exact same thing!

• javascript
• html
• knockout.js

Share Improve this question Follow edited Sep 8, 2011 at 16:42 Allen Rice asked Sep 8, 2011 at 16:30 Allen RiceAllen Rice 19.5k1414 gold badges8686 silver badges115115 bronze badges 1

• ARGH, figured it out, stupid stupid stupid mistake – Allen Rice Commented Sep 8, 2011 at 16:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

You forgot the single quotes around your optionsText

<select data-bind="
  options: Divisions, 
  optionsText: 'divID',
  optionsCaption: 'Choose...'">
</select>