JSFiddle - React, Tailwind, and code Playground

by nayanakalkur

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<div id="dvd">
    <div data-bind="foreach: products">
         <fieldset data-role='controlgroup' data-mini='true'>
                    <legend><span data-bind="text: productName"></span>
                    </legend>
                    <!-- ko foreach: sections -->
                            <input type='checkbox' style='height: 34px;' disabled='disabled' data-bind="attr:{'id':  checkboxIDState, 'checked': true}" />
                            <label style='height: 34px;' data-bind="attr:{'for': checkboxID}, text: sectionname">
                            </label>
                        <!-- /ko -->
                </fieldset>
    </div>
</div>

JavaScript

SettingsViewModel = function (pName) {
    var self = this;
    self.productName = ko.observable(pName), //heading
    self.sections = ko.observableArray([{
        checkboxID: ko.observable(),
        checkboxIDState: ko.observable(),
        sectionname: ko.observable(),
        sectionState: ko.observable()
    }]), //submenus

    self.Addsections = function (checkboxid, sIdState, sName, sState) {
        this.sections.push({
            checkboxID: checkboxid,
            checkboxIDState: sIdState,
            sectionname: sName,
            sectionState: sState
        });
    };
};


function MainViewModel() {
    var self = this;
    self.products = ko.observableArray([]);
    self.AddProducts = function (pname) {
        self.products.push(new SettingsViewModel(pname));
    };
};


$(document).ready(function () {
    VM = new MainViewModel();
    ko.applyBindings(VM, document.getElementById("dvd"));
    data = [{
        name: 'a',
        section: [{
            name: 1
        }]
    }, {
        name: 'b',
        section: [{
            name: 1
        }, {
            name: 2
        }, {
            name: 3
        }]
    }]; //some dummy data
    CallMEnus(data);
});


function CallMEnus(data) {
    var str = "";

    $(data).each(function (index, products) {
        VM.AddProducts(products.name);

        $(products.section).each(function (i, section) { // here
            var id = "data";
            var state = "checked";
            VM.products()[index].Addsections(id, state, section.name, section.state);
        });
    });

};