javascript - Dropdown list in KnockoutJS not binding -
i'm trying make values database appear in dropdownlist . sucessfully displayed data using table when added dropdownlist (<select>) stops there. can't figure out 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 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); }
don't apply bindings twice same context. change javascript to:
ko.applybindings({ choice: viewmodelchoicejson, controltype: viewmodelcontroltypejson }); and in html, binding options specify $root before controltype:
<select data-bind="options: $root.controltype, optionstext: 'controltype', optionscaption: 'ct', optionsvalue: 'controltypeid'"/>
Comments
Post a Comment