How to bind hirarchial array to dropdown list in knockout js?

Question

I am trying to bind a collection of observable array to dropdwon list but it is not binding the dropdown list. Can anybody guide me on how this can be achived?

My View model

function viewmodel() {
var self = this;
self.Option = ko.observableArray([{
    mealName: "Standard (sandwich)",
    price: 0
}, {
    mealName: "Premium (lobster)",
    price: 34.95
}, {
    mealName: "Ultimate (whole zebra)",
    price: 290
}]);
self.OptionsArray = ko.observableArray();
self.addOption = function () {
    self.OptionsArray.push(self.Option);
}
}
var vm = new viewmodel();
ko.applyBindings(vm);

And binding is as below

<button data-bind="click: addOption">Add</button>
<!-- ko foreach: OptionsArray -->
<select data-bind="options:Option,optionsText:'mealName'"></select>
<!-- /ko -->

Here is the JS fiddle http://jsfiddle.net/Uj8Zt/

Answer 1

Inside of your binding, you will want to bind against $data rather than Option, as it will represent the current item from your loop in OptionsArray.

http://jsfiddle.net/rniemeyer/5JXgK/