JSFiddle - React, Tailwind, and code Playground

by jms_a88

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js"></script>
<script>
    
    // fake data
    var options = [];
    options.push({optionText: 'hellow'});
    options.push({optionText: 'hellow1'});
    options.push({optionText: 'hellow2'});
    options.push({optionText: 'hellow3'});
    var data = {options: options};
</script>

<div data-bind="component: {name: 'dropdown', params: data}"></div>

<template id="test">
    <!-- ko foreach: options() -->
    <span data-bind="text:optionText"></span>
    <!-- /ko -->
</template>

JavaScript

// alert(ko ? 'ko found':'missing');
$(document).ready(function(){
    
    function ViewModel(params, element){
        var self = this;
        self.Options = params.options;
        self.DropDownOptions = ko.computed(function(){
            var options = [];
            
            var unwrappedOptions = ko.unwrap(self.Options);
            // Set the options
            for (var i = 0; i < unwrappedOptions.length; i++) {
                var option = unwrappedOptions[i];
                options.push(option);
            }
            
            return options;
        });
    }
    
    
    
    
    // Hook up the component
    ko.components.register('dropdown', {
        template: {
            element: 'test'
        },
        viewModel: {
            createViewModel: function(dataSet, componentInfo) {
                return new ViewModel(dataSet, componentInfo.element);
            }
        }
    
    });
    
    ko.applyBindings();
});