Dropdown list in KnockoutJS not binding

Question

I'm trying to make the values from the database appear in the dropdownlist . I sucessfully displayed the data using the table but when i added the dropdownlist ( <select> ) it stops there. I can't figure out the problem.

<table>
  <thead><tr>
    <th>Choice Text</th>
    <th>Zero Tolerance Message</th>
    <th>Has SubChoice</th>
  </tr></thead>
  <tbody data-bind="foreach: choice">
    <tr>
     <td>
         <label data-bind="text: ChoiceText,visible:IsUsed"></label>
         <input type="text" data-bind="value: ChoiceText, visible: !IsUsed()" >
     </td>
     <td>
         <label data-bind="text: ZeroToleranceMessage, visible: IsUsed"></label>
         <input type="text" data-bind="value: ZeroToleranceMessage, visible: !IsUsed()" />
     </td>
     <td>
         <label data-bind="text: HasSubChoice, visible: IsUsed"></label>
         <input type="text" data-bind="value: ZeroToleranceMessage, visible: !IsUsed()" />
         <select data-bind="options: controlType, optionsText: 'ControlType', optionsCaption: 'CT', optionsValue: 'ControlTypeId'"/>
     </td>
    </tr>
  </tbody>
</table>

Below that are these scripts:

<script src="~/Content/Scripts/jquery-1.9.1.js"></script>
<script src="~/Content/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Content/Scripts/knockout.js"></script>
<script src="~/Content/Scripts/knockout.mapping-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $(function () {

            $('th > :checkbox').click(function () {
                $(this).closest('table')
                    .find('td > :checkbox')
                    .attr('checked', $(this).is(' :checked'));
            });
        });

        var viewModelChoiceJSON = ko.mapping.fromJS( $.parseJSON('@Html.Raw(Model.choiceJsonData)'));
        var viewModelControlTypeJSON = ko.mapping.fromJS( $.parseJSON('@Html.Raw(Model.controlTypeJsonData)'));
        //Html.Raw(jsonData)
        ko.applyBindings({ choice: viewModelChoiceJSON });
        ko.applyBindings({ controlType: viewModelControlTypeJSON });
    });

</script>

Controller:

public ActionResult ChoiceList(int? questionId)
{
    _ValidationService = DiFactory.Resolve<IValidationService>();
    _ChoiceService = DiFactory.Resolve<IChoiceService>();
    ChoiceViewModel viewModel = new ChoiceViewModel(_ChoiceService.GetChoice(questionId));
    viewModel.choiceJsonData = JsonConvert.SerializeObject( _ChoiceService.GetChoice(questionId));
    viewModel.controlTypeJsonData = JsonConvert.SerializeObject(_ValidationService.GetControlType());
    //  viewModel.ControlTypeSource = Utility.ControlTypeSource();
    return PartialView("~/Areas/Validation/Views/Choice/ChoiceGrid.cshtml", viewModel);
}

Answer 1

Don't apply bindings twice for the same context. Change your JavaScript to:

ko.applyBindings({
    choice: viewModelChoiceJSON,
    controlType: viewModelControlTypeJSON
});

And in HTML, where you binding options specify $root before controlType:

<select data-bind="options: $root.controlType, optionsText: 'ControlType', optionsCaption: 'CT', optionsValue: 'ControlTypeId'"/>