JSFiddle - React, Tailwind, and code Playground

by maxgalbu

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>
<script id='template' type='text/ractive'>
    <p> We 're using Ractive.js version {{version}}</p>
    {{#if !ordine.spedizioni}}
        Nothing found
    {{else}}
        {{#each ordine.spedizioni:spedizioneindex}}
            {{#if !.pagamenti.length}}
                No payments
            {{else}}
                {{#each .pagamenti:pagamentoindex}}
                   {{#if .tipo == "carta" || .tipo == "bonifico"}}
                       <br>{{ .stato}}
                       
                       <button type="button" on-click="changepagamento:{{spedizioneindex}},{{pagamentoindex}}">change status</button>
                       <button type="button" on-click="changepagamento:{{spedizioneindex}},{{pagamentoindex}}">change status</button>
                   {{/if}}
                {{/each}}
                       
                <br><button type="button" on-click="addpagamento:{{spedizioneindex}}">add</button>
            {{/if}}
        {{/each}}
    {{/if}}
</script>

CSS

body {
    font-family:'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

CoffeeScript

ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        version: Ractive.VERSION,
        ordine: {
            spedizioni: [
                {
                    pagamenti: [
                        {stato: "rimborsato", tipo: "carta"},
                        {stato: "autorizzato", tipo: "carta"},
                    ]
                },
                {
                    pagamenti: [
                        {stato: "attesa", tipo: "carta"},
                        {stato: "attesa", tipo: "bonifico"},
                    ]
                }
            ]
        }
    }
});

ractive.on("addpagamento", (event, spedizioneindex) ->
    spedizione = this.get("ordine.spedizioni.#{spedizioneindex}");
    pagamento = {stato: "attesa", tipo: "carta"};
    spedizione.pagamenti.push(pagamento);
);

ractive.on("changepagamento", (event, spedizioneindex, pagamentoindex) ->
    if confirm("Are you sure?")
        pagamento = this.get("ordine.spedizioni.#{spedizioneindex}.pagamenti.#{pagamentoindex}");
        pagamento.stato = "pagato";
        this.update();
);