JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<!--
   This is "main" layout.
-->
<div id="application">
    <header id="top">
        <h1 dx-bind="title">Lorem ipsum dolor sit amet.</h1>
    </header>
    
    <section id="full" dx-module="flashnews"></section>
    
    <section id="content" dx-module="content">
        <h2 content-title>Sākumsaturs.</h2>
        <p>Satursaturs.</p>
        <p>Randomsaturs.</p>
        <p content-description>Ģenerētais saturs.</p>
    </section>
    
    <footer id="bottom">
        <p dx-bind="disclaimer">The foot!</p>
    </footer>
</div>

<!--
    Tev jāpalīdz izdomāt, kā pie joda, atvieglot pa taisno ielikt saturu
    normālā atribūtā (#1), vai aizvietot elementa saturu (#2) ar vērtību no datiem.

    Atvieglot, as in, kas nepiesauktu "regex"... (protams, ja citu variantu neredzi, un
    arī neredzi problēmu regex'ā, tad pofig.)
-->
<div dx-template="flashnews">
    <figure>
        <img dx-collection="[email protected]" src="{{ element.source }}" alt="{{ element.alt }}" /> <!-- #1 -->
    </figure>

    <ul>
        <li dx-collection="[email protected]">
            <span class="number">{{ ~no }}</span> <!-- #2 -->
            <span class="title">{{ flashnews.titles~item }}</span>
        </li>
    </ul>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
}

#top
{
    background-color: #ccc;
    text-align: center;
    
    border-bottom: dotted 1px black;
    
    padding: 1em;
    
    margin-bottom: 1em;
}

#content
{
    padding: 1em;
    
    background-color: #dbdbdb;
}

#bottom
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: solid 1px black;
    text-align: center;
}

[dx-template]
{
    display: none;
}

#full .title
{
    display: none;
}

JavaScript

// Ai, da dirsā to kodu, tas ko es gribu pateikt...
// Mana doma ir tāda, ka, modulis var būt ļoti plaši definēts. Viņš saprot kaut kādus
// HTML atribūtus, kurus prot piesavināties un izdot atpakaļ "pasaulei".
// #4.2. Nav obligāti jāsatur visus "moduļa" piešķirtos un "modulim" saprotamos
// atribūtus.


/**
 * Content module
 */
var content = function(element)
{
    // Load given values as placeholders.
    this._title = $('[content-title]', element).html();
    this._description = $('[content-description]', element).html();
    
    // And make them also the defaults.
    this.title = this._title;
    this.description = this._description;
    
    this.element = element;
    
    this.id = $(element).attr('id');
};

content.prototype.populate = function()
{
    // If is set content.
    // <data-source>.<request-uri>.<module>.<instance-identifier>   
    var instanceData = data[request]['content'][this.id];
    
    if (typeof instanceData !== 'undefined')
    {        
        this.title = instanceData.title;
        this.description = instanceData.description;
    }
};

content.prototype.save = function()
{
    $('[content-title]', this.element).html( this.title );
    $('[content-description]', this.element).html( this.description );
};

/**
 * Flashnews module.
 */
var flashnews = function(element) {
    this.elements = [];
    this.titles = [];
    
    this.element = element;
    this.id = $(element).attr('id');
    
    this.template = $('[dx-template="flashnews"]');
};

flashnews.prototype.populate = function()
{
    try
    {
        var instanceData = data[request]['flashnews'][this.id];
        
        this.elements = instanceData.elements;
        this.titles = instanceData.elements;
    }
    catch (e)
    {}
};

flashnews.prototype.save = function()
{
    var empty = $(this.element).is(':empty');
    
    var module = this;
        
    if (empty && this.elements.length > 0)
    {
        // Clone template.
        var template =...