Knockout.groupedOptions: non-observable
HTML
<script src="https://rawgithub.com/Supertext/knockout.groupedOptions/master/knockout-groupedOptions.min.js"></script>
<select data-bind="groupedOptions: { groups: { coll: Groups }, optionsCaption: '- Please select -', value: 'SelectedOption' }"></select>
<button data-bind="click: display">Click me</button>
JavaScript
// this is the data for our view-model, and which we'll render inside the <select> element
var demoGroups = [{
"Label": "group 1",
"Options": [{
"Text": "item 1 - 1",
"Value": "1-1"
},
{
"Text": "item 1 - 2",
"Value": "1-2"
},
{
"Text": "item 1 - 3",
"Value": "1-3"
}]
},
{
"Label": "group 2",
"Options": [{
"Text": "item 2 - 1",
"Value": "2-1"
},
{
"Text": "item 2 - 2",
"Value": "2-2"
},
{
"Text": "item 2 - 3",
"Value": "2-3"
}]
}];
var vmMain_NonObservable = function(groups) {
var self = this;
// This is the outermost collection which is bound to the <select> element.
// This must always be stated in the 'data-bind' declaration.
self.Groups = [];
// This property holds the selected item from the options list
self.SelectedOption = null;
if (typeof(groups) !== "undefined" && groups) {
for (var i = 0, iMax = groups.length; i < iMax; i++) {
self.Groups.push(new vmGroup_NonObservable(groups[i]));
}
}
self.display = function() {
if (!self.SelectedOption) {
alert("No selection has been made");
} else {
alert("You selected \"" + self.SelectedOption.Text + "\"");
}
}
}
// a view-model to represent an <optgroup> element
var vmGroup_NonObservable = function(group) {
var self = this;
// This is the text which appears inside each <optgroup> element, using the element's 'label' attribute.
// This property uses the conventional name and consquently may be omitted in the 'data-bind' declaration.
self.Label = null;
// This is the collection which represents the <option> elements for the context <optgroup>.
// This property uses the conventional name and consquently may be omitted in the 'data-bind' declaration.
self.Options = [];
if...