JSFiddle - React, Tailwind, and code Playground

by harsh vardhan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://rawgit.com/craftpip/bootstrap-fullscreen-select/master/css/bootstrap-fullscreen-select.css">
<script src="https://rawgit.com/craftpip/bootstrap-fullscreen-select/master/js/bootstrap-fullscreen-select.js"></script>
<script src="https://rawgit.com/craftpip/bootstrap-fullscreen-select/master/js/bootstrap-fullscreen-select.min.js"></script>
<select data-bind="comboBox:{
    options: messages,
    optionsText: function(i) { return i.message},
    optionsValue:'messageID' ">
</select>

JavaScript

ko.bindingHandlers.comboBox = {

       init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
           var bindings = valueAccessor();
           var optionsObservableArray = bindings.options;
           optionsObservableArray.subscribe(function (newObservableArray) {

               if (newObservableArray && newObservableArray.length > 0) {

                   if (element.comboBoxInitialised) {
                       return;
                   }

                   ko.applyBindingsToNode(element, {
                       options: bindings.options,
                       optionsValue: bindings.optionsValue,
                       optionsText: bindings.optionsText
                   });
                   $(element).mobileSelect({});
                   element.comboBoxInitialised = true;
               }
           });
       }
   };

   var viewModel = function () {

       messages: [{
           messageID: 1,
           message: "hello"
       }]



   };
   var vm = new viewModel();
   ko.applyBindings(vm);