Select2.js with ko custom binding Not Working
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.3.2/select2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
This Works:
<select id="jQuery" data-bind="options: options, optionsText: 'optionsText', optionsValue:'optionsValue'"></select>
<br/>
This Doesn't Work:
<select id="KOCustom" data-bind="select2: options, optionsText: 'optionsText', optionsValue:'optionsValue'"></select>
CSS
/*
Version: @@ver@@ Timestamp: @@timestamp@@
*/
.select2-container {
position: relative;
display: inline-block;
/* inline-block for ie7 */
zoom: 1;
*display: inline;
vertical-align: middle;
}
.select2-container, .select2-drop, .select2-search, .select2-search input {
/*
Force border-box so that % widths fit the parent
container without overlap because of margin/padding.
More Info : http://www.quirksmode.org/css/box.html
*/
-webkit-box-sizing: border-box;
/* webkit */
-khtml-box-sizing: border-box;
/* konqueror */
-moz-box-sizing: border-box;
/* firefox */
-ms-box-sizing: border-box;
/* ie */
box-sizing: border-box;
/* css3 */
}
.select2-container .select2-choice {
display: block;
height: 26px;
padding: 0 0 0 8px;
overflow: hidden;
position: relative;
border: 1px solid #aaa;
white-space: nowrap;
line-height: 26px;
color: #444;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
background-image: linear-gradient(top, #ffffff 0%, #eeeeee...
JavaScript
$(function () {
var vm = new viewModel();
ko.applyBindings(vm);
$("#jQuery").select2();
});
ko.bindingHandlers.select2 = {
init: function (element){
ko.bindingHandlers.options.init(element);
},
update: function (element, valueAccessor, allBindingsAccessor) {
ko.bindingHandlers.options.update(element, valueAccessor, allBindingsAccessor);
//$(element).select2();
}
};
function viewModel() {
var self = this;
self.options = ko.observableArray(
[{
optionsValue: 1,
optionsText: "One"
}, {
optionsValue: 2,
optionsText: "two"
}, {
optionsValue: 3,
optionsText: "three"
}]);
}