Below is a quick example of radio button list with knockout.js-
<script src="http://knockoutjs.com/js/knockout-2.1.0.js" type="text/javascript"></script> <table> <tr> <td> <div data-bind="foreach: items"> <input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" /> <span data-bind="text: name"></span> </div> <div data-bind="text: selected"> </div> </td> </tr> </table> <script type="text/javascript"> function RadioButton(id, name, selected) { this.id = id; this.name = name; this.selected = selected; } function RadioModel() { var self=this; self.items= [ new RadioButton(1, "first", true), new RadioButton(2, "two", false), new RadioButton(3, "three", false), ]; self.selected = ko.observable(); self.onSubmit= function () { var x = self.selected(); } }; var viewModel = new RadioModel(); $(function () { ko.applyBindings(viewModel); var selected = ko.utils.arrayFirst(viewModel.items, function (item) { return item.selected; }); viewModel.selected(selected.id); }); </script>We can check this in jsFiddle here.
No comments:
Post a Comment