JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<div class="filter" data-filter-name="maker" data-bind="with: filters">
    <input type="checkbox" data-bind="checked: maker" value="Audi" /> Audi<br/>
    <input type="checkbox" data-bind="checked: maker" value="BMW" /> BMW<br />
    <input type="checkbox" data-bind="checked: maker" value="Volvo" /> Volvo<br />
</div>
<br/>
<div class="filter" data-filter-name="year" data-bind="with: filters">
    <input type="checkbox" data-bind="checked: year" value="2012" /> 2012<br/>
    <input type="checkbox" data-bind="checked: year" value="2011" /> 2011<br />
    <input type="checkbox" data-bind="checked: year" value="2010" /> 2010<br />
</div>
<br/>
<div data-bind="text: ko.toJSON($data.filters)"></div>

JavaScript

var filterElements = document.getElementsByClassName('filter');
var filterNames = [];

for(var i = 0; i< filterElements.length; i++){
    filterNames.push(filterElements[i].getAttribute('data-filter-name'));
}

function filterViewModel(data){
    var self = this;
    var oFilters = {};
    for(var j=0;j<data.length;j++){
        var o = ko.observableArray([]);
        o.subscribe(function(newValue){
            fireAjaxRequest(self);
        });
        oFilters[data[j]] = o;
    }
    self.filters = oFilters;
}

function fireAjaxRequest(viewmodel){
    console.log(viewmodel.filters);
}

var viewmodel = new filterViewModel(filterNames);
ko.applyBindings(viewmodel);