Posts tagged ‘knockout radiobutton’

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.
[html]
<!– 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>
[/html]