JSFiddle - React, Tailwind, and code Playground

by nuysoft

HTML

<script src="//g.alicdn.com/thx/brix-release/0.1.6/require-config-css-debug.js"></script>
<div id="container" class="container">
    <div bx-name="components/nprogress"></div>
</div>
<script type="text/template" id="dropdownTpl">
    <% for( var i = 0; i < selects; i++ ) { %>
        <%= Mock.Random.word(10) %>
        <select bx-name="components/dropdown" 
            data-value="<%= Mock.Random.int(0, options - 1) %>" 
            data-value-delay="<%= Mock.Random.int(0, options - 1) %>">
            <% for( var ii = 0; ii < options; ii++ ) { %>
            <option value="<%= ii %>"><%= ii + '. ' + Mock.Random.word(10) %></option>
            <% } %>
        </select>
    <% } %>
    <div class="hide">
        <% for( var i = 0; i < selects; i++ ) { %>
            <%= Mock.Random.word(10) %>
            <select bx-name="components/dropdown" 
                data-value="<%= Mock.Random.int(0, options - 1) %>" 
                data-value-delay="<%= Mock.Random.int(0, options - 1) %>">
                <% for( var ii = 0; ii < options; ii++ ) { %>
                <option value="<%= ii %>"><%= ii + '. ' + Mock.Random.word(10) %></option>
                <% } %>
            </select>
        <% } %>
    </div>
</script>

CSS

select {
    min-width: 190px;
    min-height: 32px;
}

JavaScript

require(['jquery', 'underscore', 'brix/loader', 'mock'], function($, _, Loader) {
	require(['components/dropdown'], function(Dropdown) {
		var tpl = _.template(
			$('#dropdownTpl').text()
		)
		var data = {
			selects: 1000,
			options: 10
		}
		var $container = $('#container')
			.append(tpl(data))
		Loader.boot($container, function() {
			console.time('.query()')
			var dropdowns = Loader.query('components/dropdown')
			console.timeEnd('.query()')

			console.time('.val()')
			_.each(dropdowns, function(item, index) {
				item.val(
					item.$element.data('value-delay')
					// Mock.Random.int(0, data.options - 1)
				)
			})
			console.timeEnd('.val()')
		}, function(error, instance, index, count) {
			var nprogress = Loader.query('components/nprogress')
			if (nprogress.length) nprogress.set((index + 1) / count)
		})
	})
})