JSFiddle - React, Tailwind, and code Playground
HTML
<ul data-bind="foreach: AllKeywordsCategories">
<li> <a href="#" data-bind="keywordPopOver: $data, text: Name"></a>
<div class="popover-container" style="display: none;" data-bind="keywordListBox: { data: $data, name: 'keywordlistbox', context : { selectedKeywords: $parent.Keywords } }"></div>
</li>
</ul>
JavaScript
ko.bindingHandlers.keywordPopOver = {
init: function (element, valueAccessor, allBindingsAccessor, data, context) {
$(element).popover({
animation: true,
html: true,
trigger: 'manual'
});
var popOverContainer = $(element).next('div.popover-container');
ko.utils.registerEventHandler(element, "click", function () {
var popoverContent = popOverContainer.html();
var popover = $(element).data('bs.popover');
popover.options.content = popoverContent;
$(element).popover('show');
$('[data-popoverclose]').click(function () {
$(element).popover('hide');
});
});
}
};
ko.bindingHandlers.keywordListBox = {
init: ko.bindingHandlers.template.init,
update: function (element, valueAccessor, allBindings, data, context) {
var options = ko.utils.unwrapObservable(valueAccessor());
ko.utils.extend(context, options.context);
context.$parent.EditableCategories.push(context.$rawData);
return ko.bindingHandlers.template.update.apply(this, arguments);
}
};
ko.bindingHandlers.checkedValueInArray = {
init: function (element, valueAccessor, allBindings) {
var prop = allBindings().valueInArray;
var valueArray = allBindings().valueArray;
var value = valueAccessor();
console.log(element);
ko.utils.registerEventHandler(element, "change", function () {
console.log(element);
var selectedModel = ko.utils.arrayFirst(ko.unwrap(valueArray()), function (item) {
return ko.utils.unwrapObservable(item[prop]) == ko.utils.unwrapObservable(value[prop]);
});
if ($(element).is(":checked") && selectedModel === null) {
valueArray.push(value);
} else if (!$(element).is(":checked") && selectedModel !== null) {
...