JSFiddle - React, Tailwind, and code Playground

by brunomsilva

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<script src="http://ace.staging.managebuilding.com/Manager/js/auto/05-BuildiumBase/framework.js"></script>
<script src="http://ace.staging.managebuilding.com/Manager/js/auto/04-PluginsExtensions/knockout.mapping.js"></script>
<script src="http://ace.staging.managebuilding.com/Manager/js/auto/06-BuildiumExtensions/framework.ko.js"></script>
<div id="test">
    <input type="checkbox" data-bind="checked: Show" /> Show information
    <div id="divPropertyGroup" data-bind="if: Show">
        <input type="radio" id="cbAllProperties" name="properties" data-bind="checked: Share.AsString" value="true"/>
        <label for="cbAllProperties" >All properties</label>
        <input type="radio" id="cbLimitedProperties" name="properties" data-bind="checked: Share.AsString" value="false"/>
        <label for="cbLimitedProperties">Only the following properties</label>
        
        <div id="divListOfProperties">
            <!-- ko foreach: $root.ro.FileSharedProperties -->
            <input type="checkbox" data-bind="value:Id, disable: $parent.Share, checked: $parent.FileSharedPropertyIds, attr:{'id':'fsp'+Id()}" />
            <label data-bind="text: Text, attr:{'for':'fsp'+Id()}" class="checkboxLabel"></label><br/>
            <!-- /ko -->
        </div>
    </div>
    
    <div data-bind="text: buildium.ko.toJSON($root)"></div>
    
</div>

JavaScript

var model = {
    Show: false,
    Share: true,
    FileSharedPropertyIds: [],
    ro: {
        FileSharedProperties: [
            {
            Id: '1',
            Text: 'text'},
        {
            Id: '2',
            Text: 'text2'},
        {
            Id: '3',
            Text: 'text3'}
        ]
    }
};

buildium.ko.bind('test', model);