JSFiddle - React, Tailwind, and code Playground
HTML
<select data-bind="
options: Options,
value: Selection,
optionsText: 'Text',
optionsValue: 'Value',
chosen: Options
"></select>
<input type="button" data-bind="click: Reload" value="reload" />
JavaScript
ko.bindingHandlers.chosen = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
console.log("INIT");
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value = ko.unwrap(valueAccessor());
console.log("IT WORKS!");
}
};
function Model() {
this.Options = ko.observableArray(opt1);
this.Reload = function () {
if (!this.index) {
this.Options(opt2);
this.index = 1;
} else {
this.Options(opt1);
this.index = 0;
}
this.Options.valueHasMutated();
};
this.index = 0;
}
var opt1 = [{
Text: "1",
Value: "1"
}, {
Text: "2",
Value: "2"
}, ];
var opt2 = [{
Text: "3",
Value: "3"
}, {
Text: "4",
Value: "4"
}, ];
ko.applyBindings(new Model());