JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<div id="product-filter" class="product-filter-container tab" data-additional-filters=".product-grid-sorter-container" >
                                    <div class="product-filter" data-filter-name="merke" data-filter-type="checkbox">
                                        <div class="product-filter-label">Merke</div>
                                        <div class="product-filter-field">
                                            <ul class="product-filter-checkbox-list" data-bind="with: filters">
                                                <li><label><input type="checkbox" value="jotun" data-bind="checked: merke" checked="checked"/><span>Jotun</span></label></li>
                                                <li><label><input type="checkbox" value="butinox" data-bind="checked: merke" /><span>Butinox</span></label></li>
                                                <li><label><input type="checkbox" value="nordsjo" data-bind="checked: merke" checked="checked" /><span>Nordsjô</span></label></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="product-filter" data-filter-name="type" data-filter-type="checkbox">
                                        <div class="product-filter-label">Type</div>
                                        <div class="product-filter-field">
                                            <ul class="product-filter-checkbox-list" data-bind="with: filters">
                                                <li><label><input type="checkbox" value="vannbasert" data-bind="checked: type"/><span>Vannbasert</span></label></li>
                                                <li><label><input type="checkbox" value="oljebasert" data-bind="checked: type" /><span>Oljebasert</span></label></li>
                  ...

JavaScript

$.fn.getViewModelData = function() {
    console.time('getViewModelData');
    var obj = $(this);
    if (!obj || obj.length === 0) {
        return undefined;
    }

    var data = {};
    var objToBind = obj.find('[data-bind]');
    $.each(objToBind, function(index, elem) {
        console.time('getViewModelDataLoop');
        var dataBindValue = elem.getAttribute('data-bind');
        var multiple = objToBind.filter('[data-bind="' + dataBindValue + '"]').length > 0;

        if (typeof dataBindValue != 'string') {
            return true;
        }

        dataBindValue = dataBindValue.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, '');
        if (!dataBindValue) {
            return true;
        }

        var koParams = dataBindValue ? dataBindValue.split(',') : undefined;
        if (!koParams) {
            return true;
        }

        for (var i = 0; i < koParams.length; i++) {
            var koParam = koParams[i].replace(/\s+/g, '').split(':');
            switch (koParam[0]) {
            case 'text':
            case 'html':
                data[koParam[1]] = elem.innerHTML || '';
                break;
            case 'value':
                data[koParam[1]] = elem.value || '';
                break;
            case 'visible':
                if (koParam[1] != 'true' || koParam[1] != 'false') {
                    data[koParam[1]] = false;
                }
                break;
            case 'checked':
                if (elem.type == 'radio' && elem.defaultChecked) {
                    data[koParam[1]] = elem.value;
                    break;
                }
                else if (elem.type == 'checkbox') {
                    if (multiple) {
                        if (typeof data[koParam[1]] === 'undefined') {
                            data[koParam[1]] = [];
                        }
                        if (elem.defaultChecked) {
                            data[koParam[1]].push(elem.value);
                            break;
   ...