JSFiddle - React, Tailwind, and code Playground

by armydee

HTML

<script src="http://www.jsviews.com/download/jsviews.js"></script>
<div class="container">
        
        <section class="content-wrapper main-content clear-fix">
            
    
    <div id="programmeDetails"></div>

    <script id="progLayerListTmpl" type="text/x-jsrender">
        {^{for programmes}}
        <ul>
            <li class="programme">
                <a href="#">{^{:GroupName}}</a>

                {^{for XOLLayers}}
                <ul class="xolLayers">
                    <li><a href="">{^{:LayerTitle}}</a></li>
                </ul>
                {{/for}}
                {^{for SwingLayers}}
                <ul class="swingLayers">
                    <li><a href="">{^{:LayerTitle}}</a></li>
                </ul>
                {{/for}}
                {^{for TreatyLayers}}
                <ul class="treatyLayers">
                    <li><a href="">{^{:LayerTitle}}</a></li>
                </ul>
                {{/for}}
            </li>
        </ul>
        {{/for}}

        
        
        <div id="notesContainer" data-link="visible{:selectedNotes.length != 0}">
            <ul id="notes">
            {^{if selectedNotes != null}}
            {^{for selectedNotes}}
                <li>{^{:Value}}</li>
            {{/for}}
            {{/if}}
            </ul>
            
            <p>There are <span data-link="{:selectedNotes.length}"></span> notes so far...</p>
            
        </div>

        <div id="noNotes" data-link="visible{:selectedNotes}">
            <h4>No notes exist. Add one...</h4>
        </div>

    </script>
            

        </section>
    </div><!-- end container -->

JavaScript

var data = {
    programmesFromServer: [{
        GroupName: "Test Name",
        Notes: [{
            id: 1,
            Value: "This is the first note"
        }, {
            id: 2,
            Value: "This is the second note"
        }]
    }],
    UsersName: "Army",
    UsersLanID: "ArmyDahul"
};

var app = {
    programmes: data.programmesFromServer,
    selectedNotes: null,
    noteCount: 0,
    selectedLayer: {},
    selectedProgramme: null,
    visitorLanId: data.UsersLanID,
    visitorName: data.UsersName
};

console.log(data);
console.log(app);

var progLayerTmpl = $.templates("#progLayerListTmpl");
progLayerTmpl.link("#programmeDetails", app);

$("#programmeDetails").on("click", "li.programme > a", function () {
    var dataItem = $.view(this).data;

    $.observable(app).setProperty("selectedProgramme", dataItem);
    $.observable(app).setProperty("selectedNotes", dataItem.Notes);

});