JSFiddle - React, Tailwind, and code Playground

by xdumaine

HTML

<script type="text/html" id="select-template">
    <select data-bind="
                options: myOpts,
                value: myOpt,
                optionsAfterRender: optsAfterRender
            "></select>
</script>

<div data-bind="template: { name: 'select-template', data: vm1 }"></div>
<div data-bind="template: { name: 'select-template', data: vm2 }"></div>

JavaScript

var VM1 = function () {
    var self = this;
    self.myOpts = ko.observableArray([1, 2, 3, 4, 5, 6, 7]);
    self.myOpt = ko.observable();
    self.optsAfterRender = null;
};

var VM2 = function() {
    var self = this;
    self.myOpts = ko.observableArray([1, 2, 3, 4]);
    self.myOpt = ko.observable();
    self.optsAfterRender = function(option, entity) {
        ko.applyBindingsToNode(option, 
                               { disable: entity % 2 === 0 },
                               entity);  
    };
};

var VM = function () {
    var self = this;
    self.vm1 = new VM1();
    self.vm2 = new VM2();
};

var vm = new VM();
ko.applyBindings(vm);