JSFiddle - React, Tailwind, and code Playground

by brunomsilva

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.debug.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/05-BuildiumBase/framework.js"></script>
<script src="http://ace.staging.managebuilding.com/Manager/js/auto/06-BuildiumExtensions/framework.ko.js"></script>
<script src="http://ace.staging.managebuilding.com/Manager/js/auto/03-Plugins/jquery.tmpl.js"></script>
<div id="test">
    <p><a href="#" data-bind="click: loadKO">Load KO template</a></p>
    <p><a href="#" data-bind="click: loadTmpl">Load jquery-tmpl template</a></p>    
    
    
    <table>
        <tbody>
        <!-- ko foreach: ListKO-->
            <tr class="active">
                <td class="has-checkbox"><input type="checkbox" data-bind="value: Id" /></td>
                <td><div data-bind="text: Id"></div><!-- ko if: Id() % 3 == 0 --><div data-bind="text: ' ' + Id()"></div><!-- /ko --></td>
                <td data-bind="text: Id"></td>
                <td data-bind="text: Id"></td>
                <td data-bind="text: Id() % 2 == 0 ? 'Vendor' + (Id() * 10) : 'Rental owner' + (Id() * 10) "></td>
                
                <td class="currency" data-bind="currencyText: Id"></td>
            </tr>
        <!-- /ko -->
        </tbody>
    </table>
    
    <div data-bind="template: { name: 'listTemplate' }"></div>
        
</div>

<script type="text/html" id="listTemplate">
    <table>
        <tbody>
        {{each ListTmpl}}
            <tr class="active">
                <td class="has-checkbox"><input type="checkbox" value="${Id}" /></td>
                <td><div>${Id}</div>{{if Id() % 3 == 0}}<div>a${Id() * 3}</div>{{/if}}</td>
                <td>${Id}</td>
                <td>${Id}</td>
                <td>kjk</td>
                
                <td class="currency">${Id}</td>
            </tr>
  ...

CSS

table { width: 100%; }

JavaScript

var model = {
    ListKO: [],
    ListTmpl: []
};

ko.setTemplateEngine(new ko.jqueryTmplTemplateEngine());

buildium.ko.bind('test', model, null, {
    actions: {
        loadKO: function() {
             var list = [];
            for (var i = 0; i < 1000; i++) {
                list.push({
                    Id: ko.observable(i)
                });
            }
            this.ListKO(list);
        },
        loadTmpl: function() {
            var list = [];
            for (var i = 0; i < 1000; i++) {
                list.push({
                    Id: ko.observable(i)
                });
            }
            this.ListTmpl(list);
        }
    }
});