March 25, 2014, 1:01 pm by Rhyous
<!-- 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 - Create a data model -->
var SelectableListDataModel = function () {
// Private
var _self = this;
// Public
_self.labels = new Array(); // Should have same count as values
_self.values = new Array(); // Should have same count as Labels
_self.defaultValue = 0;
_self.canSelectMethod = function () { return true; },
_self.push = function (label, value) {
_self.labels.push(label);
_self.values.push(value);
};
};
<!-- Step 5 - Add an OptionViewModel -->
var OptionViewModel = function(parent, label, value, canSelectMethod) {
// private
var _self = this;
var _parent = parent;
// public
_self.id = ko.observable();
_self.class = ko.observable();
_self.label = label ? ko.observable(label) : ko.observable();
_self.value = value ? ko.observable(value) : ko.observable();
_self.isSelected = ko.computed(function () {
return (_parent && _parent.selectedValue) ? _parent.selectedValue() == _self.value() : false;
}, _self);
_self.canSelect = canSelectMethod ? ko.computed(canSelectMethod) : ko.computed(function () { return true; });
};
<!-- Step 6 - Add an SelectViewModel -->
var SelectViewModel = function (selectableListDataModel) {
// private
var _self = this;
var _defaultDataModel = new SelectableListDataModel();
var _dataModel = selectableListDataModel ? selectableListDataModel : _defaultDataModel;
// Public
_self.canSelect = (_dataModel.canSelectMethod)? ko.computed(_dataModel.canSelectMethod) : ko.computed(_defaultDataModel.canSelectMethod);
_self.list = ko.observableArray();
_self.selectedValue = _dataModel.defaultValue ? ko.observable(_dataModel.defaultValue) : ko.observable();
if (_dataModel.labels && _dataModel.values) {
for (var i = 0; i < _dataModel.labels.length; i++) {
_self.list.push(new OptionViewModel(_self, _dataModel.labels[i], _dataModel.values[i], _self.canSelect));
}
}
_self.selectedIndex = ko.computed(function () {
var index = 0;
var foundIndex = -1;
ko.utils.arrayForEach(_self.list(), function (item) {
if (_self.selectedValue() == item.value()) {
foundIndex = index;
}
index++;
});
return foundIndex;
}, _self);
_self.selectedText = ko.computed(function () {
_self.selectedText = ko.computed(function () {
var index = _self.selectedIndex();
return (_self.list()[index]) ? _self.list()[index].label() : "";
}, _self);
}, _self);
_self.clear = function (value) {
_self.selectedValue(value ? value : "");
};
}
<!-- Step 7 - Create ViewModel for whatever you need -->
function SurveyAnswerViewModel() {
var self = this;
<!-- Step 8 - Create an observable list instance -->
self.dataModel = new SelectableListDataModel();
self.dataModel.labels = new Array("Good", "Average", "Poor");
self.dataModel.values = new Array(10,5,1);
self.dataModel.selectedValue = 10;
<!-- Step 9 - Create a SelectViewModel instance -->
self.selectGroup1 = new SelectViewModel(self.dataModel);
<!-- Step 10 - Create a computed value to require a selection before submitting -->
self.canClick = ko.computed( function() {
return self.selectGroup1.selectedValue() != "";
}, self);
<!-- Step 11 - Make some button methods for this example -->
self.submitClick = function(){
// Do something here
}
self.resetClick = function(){
self.selectGroup1.clear();
}
}
<!-- Step 12 - Create a computed value to require a selection before submitting -->
ko.applyBindings(new SurveyAnswerViewModel());
});
</script>
</head>
<body>
<!-- Step 13 - Create a drop down select item -->
<select data-bind="options: selectGroup1.list, optionsText: 'label', optionsValue: 'value', value: selectGroup1.selectedValue"></select>
<br />
<!-- Step 14 - Add html elements to see other properties -->
<p data-bind="text: 'Index: ' + selectGroup1.selectedIndex()"></p>
<p data-bind="text: 'Value: ' + selectGroup1.selectedValue()"></p>
<p data-bind="text: 'Text: ' + selectGroup1.selectedText()"></p>
<!-- Step 15 - 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>
Like this:
Like Loading...
Related
