Currently, I am in the process of creating a user interface for building charts. Users have the ability to select fields from a database in order to construct a graph. Additionally, these graphs come with a refresh interval dropdown feature.
Everything functions as expected until I attempt to retrieve a value from a saved "view". Upon setting the value, it appears to be successful when I subscribe to the RefreshInterval variable.
However, the value is instantly reset to the 0 index within my options array.
https://i.sstatic.net/3yQjR.png
[html]
<div class="wrapper wrapper-content" id="charts">
<select id="interval" data-bind="options: RefreshIntervals,
optionsText: 'Value',
value: RefreshInterval,
chosen: {
disable_search_threshold: 0,
width:'175px',
no_results_text: 'No results!',
placeholder_text_single: 'Select an interval',
search_contains: true,
}">
</select>
</div>
[javascript]
function ViewModel() {
var self = this;
this.RefreshIntervals = ko.observableArray([
new Interval(0, "Never"), new Interval(10, "seconds"), new Interval(1, "minutes"), new Interval(5, "minutes")
]);
this.RefreshInterval = ko.observable(new Interval(5, "minutes"));
};
var Interval = (function () {
function Interval(length, measurement) {
var _this = this;
this.Length = 0;
this.Measurement = "";
this.Value = "";
this.TimeoutValue = 0;
this.GetTimeoutValue = function () {
switch (_this.Measurement) {
case "seconds":
return _this.Length * 1000;
case "minutes":
return _this.Length * 60000;
default:
return 0;
}
};
this.Length = length;
this.Measurement = measurement;
if (length == 0 || measurement == "Never") {
this.Value = "Never";
}
else {
this.Value = this.Length + " " + this.Measurement;
}
this.TimeoutValue = this.GetTimeoutValue();
}
return Interval;
}());
ko.bindingHandlers.chosen =
{
init: function (element, valueAccessor, allBindings) {
$(element).chosen(valueAccessor());
// trigger chosen:updated event when the bound value or options changes
$.each('value|selectedOptions|options'.split("|"), function (i, e) {
var bv = allBindings.get(e);
if (ko.isObservable(bv)) {
bv.subscribe(function () {
$(element).trigger('chosen:updated');
});
}
});
}
};
var vm = new ViewModel();
ko.applyBindings(vm, document.getElementById("charts"));
I have provided a fiddle link for reference: Fiddle
I have three dropdown boxes that require data population. My goal is for the value to represent the actual element rather than a separate value field, which would then need to be correlated back to the object within the options list due to potential changes in the options list.
If you have any suggestions on how I can address this issue, please let me know.