RadioButton web control with Knockout.js and MVVM
Here is an example of a RadioButton control using Knockout and MVVM. Hope this helps anyone looking.
<!-- Step 1 - Create the HTML File or the View -->
<!DOCTYPE html>
<html>
<head>
<!-- Step 2 - Include jquery and knockout -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>
<!-- Step 3 - Add script to run when page loads -->
<script type="text/javascript" >
$(document).ready(function(){
<!-- Step 4 - Add a RadioButtonModel -->
var RadioButtonModel = function(parent, inText, inValue, inGroupName, canClickMethod) {
// Private
var _self = this;
var _canClickMethod = (canClickMethod) ? canClickMethod : function() { return true; };
var _parent = parent;
// Public
this.text = ko.observable(inText);
this.value = ko.observable(inValue);
this.group = ko.observable(inGroupName);
this.class = ko.observable();
this.isSelected = ko.computed(function() {
return (_parent && _parent.selectedValue) ? _parent.selectedValue() == _self.value() : false;
}, _self);
_self.canClick = ko.computed(function() { return _canClickMethod(); });
};
<!-- Step 5 - Add a RadioButtonViewModel -->
var RadioButtonViewModel = function (rbLabels, rbValues, group, defaultValue) {
// Private
var _self = this;
var _rbLables = rbLabels;
var _rbValues = rbValues;
var _group = group;
var _defaultValue = defaultValue;
// Public
_self.selectedValue = ko.observable(_defaultValue);
_self.list = ko.observableArray();
for (var i = 0; i < _rbLables.length; i++) {
_self.list.push(new RadioButtonModel(_self, _rbLables[i], _rbValues[i], _group));
}
_self.selectedIndex = ko.computed(function () {
var i = 0;
var foundIndex = -1;
ko.utils.arrayForEach(_self.list(), function (item) {
if (_self.selectedValue() == item.value()) {
foundIndex = i;
}
i++;
});
return foundIndex;
}, _self);
_self.selectedText = ko.computed(function () {
return (_self.list()[_self.selectedIndex()]) ? _self.list()[_self.selectedIndex()].text() : "";
}, _self);
_self.clear = function(value){
_self.selectedValue(value ? value : "");
}
}
<!-- Step 6 - Create ViewModel for whatever you need -->
function SurveyAnswerViewModel() {
var self = this;
<!-- Step 7 - Create an observable list instance -->
self.rbGroup1 = new RadioButtonViewModel(new Array("Good", "Average", "Poor"), new Array(10,5,1), "Group1", 10);
<!-- Step 8 - Create a computed value to require a selection before submitting -->
self.canClick = ko.computed( function() {
return self.rbGroup1.selectedValue() != "";
}, self);
<!-- Step 9 - Make some button methods for this example -->
self.submitClick = function(){
// Do something here
}
self.resetClick = function(){
self.rbGroup1.clear();
}
}
<!-- Step 10 - Create a computed value to require a selection before submitting -->
ko.applyBindings(new SurveyAnswerViewModel());
});
</script>
</head>
<body>
<!-- Step 11 - Create a div containing the html for one radio button and bind to foreach: list -->
<div data-bind="foreach: rbGroup1.list">
<div>
<input type="radio" data-bind="attr: {name: group}, value: value, checked: $root.rbGroup1.selectedValue, checkedValue: value" />
<span data-bind="text: $index() + '. ' + text()"></span>
<span data-bind="text: 'Is selected: ' + isSelected()"></span>
</div>
</div>
<br />
<!-- Step 12 - Add html elements to see other properties -->
<p data-bind="text: rbGroup1.selectedValue"></p>
<p data-bind="text: rbGroup1.selectedText"></p>
<!-- Step 13 - Add a button and bind its to methods -->
<button type="submit" id="btnSubmit" data-bind="enable: canClick, click: submitClick">Submit</button>
<button type="reset" id="btnReset" data-bind="enable: canClick, click: resetClick">Reset</button>
</body>
</html>
