Skip to content

Instantly share code, notes, and snippets.

@halityurttas
Created November 5, 2022 22:32
Show Gist options
  • Save halityurttas/2d3437bcb9f3236b6c25ee33ee504bd6 to your computer and use it in GitHub Desktop.
Save halityurttas/2d3437bcb9f3236b6c25ee33ee504bd6 to your computer and use it in GitHub Desktop.
Select2 Multiple Custom Binding
ko.bindingHandlers.select2multiValues = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
$(element).select2({multiple: true});
$(element).val(valueAccessor()()).trigger('change');
$(element).on('select2:select', function (e) {
valueAccessor()($(element).val());
});
$(element).on('select2:unselect', function (e) {
valueAccessor()($(element).val());
});
ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
$(el).select2('destroy');
});
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
$(element).val(valueAccessor()()).trigger('change');
}
};
<div id="app">
<!-- ko foreach: models -->
<select data-bind="options: $root.domains, optionsValue: 'Value', optionsText: 'Text', select2multiValues: DomainIds" style="width: 100%" multiple="true">
</select>
<!-- /ko -->
</div>
var s2app = function () {
var self = this;
self.domains = [{"Disabled":false,"Group":null,"Selected":false,"Text":"patirti.com","Value":"3cba57ad-8541-45fe-65da-08da2204455c"},{"Disabled":false,"Group":null,"Selected":false,"Text":"nesrinden.com","Value":"96712145-90f6-4120-4620-08daa0662b99"}];
self.models = ko.mapping.fromJS([{"CMSLayoutPageId":"b44ef962-aa66-44f4-ca1b-08da801b6afa","CultureLanguageId":"b043d804-0107-41de-8a78-08da220456e5","DomainIds":["3cba57ad-8541-45fe-65da-08da2204455c","96712145-90f6-4120-4620-08daa0662b99"],"RefId":"29b42fad-fca7-46b9-8a69-08dab5a2f438","Title":"Muhammedin Deneme Etiketi (Sakın Ellemeyin.)","Url":"maminin-etiketi","OldUrl":"maminin-etiketi","MetaDescription":"MuhamMuhammedin Deneme Etiketi (Sakın Ellemeyin.)medin Deneme Etiketi (Sakın Ellemeyin.)","MetaKeywords":"MuhamMuhammedin Deneme Etiketi (Sakın Ellemeyin.)medin Deneme Etiketi (Sakın Ellemeyin.)","MetaTitle":"Muhammedin Deneme Etiketi (Sakın Ellemeyin.)","OpenGraphData":"Muhammedin Deneme Etiketi (Sakın Ellemeyin.)","Content":null}]);
};
window.s2appins = new s2app();
$(document).ready(function () {
ko.applyBindings(window.s2appins, document.getElementById("app"));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment