I broke 2000 points on Stack Overflow
Check out my StackOverflow profile. http://stackoverflow.com/users/375727/rhyous?tab=badges
I broke 2000 points.
Archive for March 2014
Check out my StackOverflow profile. http://stackoverflow.com/users/375727/rhyous?tab=badges
I broke 2000 points.
<!-- 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>
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>