Programmiererforum

Code: Select all

Element value = on, Observable value = abc

Code: Select all

Change event: Setting observable to abc
Change event: Setting observable to def
Update: Element value = abc, Observable value = def
Update: Element value = def, Observable value = def
Change event: Setting observable to def
Change event: Setting observable to abc
Update: Element value = abc, Observable value = abc
Change event: Setting observable to abc
Update: Element value = def, Observable value = abc

Code: Select all

this.tempitems = ko.observableArray([{
guid: "abc",
name: "Option 1"
},
{
guid: "def",
name: "Option 2"
}
]);

this.tempitem = ko.observable("def"); // Initially selects "Option 2"
this.tempitem = ko.observable("abc");
console.log("Initial value of tempitem:", ko.unwrap(self.tempitem));

ko.bindingHandlers.rbChecked = {
init: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
var value = valueAccessor();

// Handle the change event
ko.utils.registerEventHandler(element, "change", function() {
console.log(`Change event: Setting observable to ${element.value}`);
value(element.value); // Update the observable
});

// Set the initial checked state
if (ko.unwrap(value) === element.value) {
console.log("Init: Setting element.checked = true");
element.checked = true;
}

var newValueAccessor = function() {
return {
change: function() {
value(element.value);
}
}
};

ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, viewModel, bindingContext);

if (value != undefined && $(element).val() == value()) {
setTimeout(function() {
var toggle = $(element).closest('.btn-toggle');
$(toggle).children('.btn').removeClass('active');
$(toggle).children('.btn').removeClass('btn-primary');
$(toggle).children('.btn').addClass('btn-default');

var btn = $(element).closest('.btn');
$(btn).addClass('btn-primary');
$(btn).addClass('active');

}, 0);
}
},
update: function(element, valueAccessor, allBindingsAccessor,
viewModel, bindingContext) {
const value = ko.unwrap(valueAccessor());
console.log(`Update: Element value = ${element.value}, Observable value = ${value}`);

// Ensure the checked state reflects the observable value
element.checked = value === element.value;

// If the radio button is checked, trigger the change event to update the observable
if (element.checked) {
element.dispatchEvent(new Event("change", {
bubbles: true
}));
}

if ($(element).val() == ko.unwrap(valueAccessor())) {

setTimeout(function() {
$(element).closest('.btn').toggleClass('active');

var toggle = $(element).closest('.btn-toggle');
$(toggle).children('.btn').removeClass('active');
$(toggle).children('.btn').removeClass('btn-primary');
$(toggle).children('.btn').addClass('btn-default');

var btn = $(element).closest('.btn');
$(btn).addClass('btn-primary');
$(btn).addClass('active');

}, 0);

}
}
};

Code: Select all

[list]
[*]




[/list]