JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="main">&nbsp;</div>

<script id="shelf" type='text/ractive'>
    <div>
        {{#foo}}
            <p><div></div></p>
        {{/foo}}
    </div>
</script>

JavaScript

var searchDefaults = {
            searchValue: '',          //hier staat de text in waar je mee zoekt
            activeItem: null,         //als hier gegevens in staan, krijg je het detailscherm te zien.
            disabled: false,          //als deze true staat mag je niet typen in het zoek-veld
            searchType: false,        //zoektype: barcode / gewoon
            pastSearches: [],         //hierin worden de zoekopdrachten + resultaten opgeslagen
            pastSearchesCount: 5,     //hoeveel zoekopdrachten worden er bewaard
            searchError: false,       //als deze text bevat, krijg je een foutmelding te zien
            savedItems: [],           //hierin staan de items die je wilt bewaren
            results: {},              //zoekresultaten worden hierin geplaatst
            prijsInBtw: true,        //prijzen tonen in/ex-clusief btw.
            sliderBar: 4,             //het nummer refereert naar de variabele "layouts" maar die begint bij 0 te tellen!
            layouts: ['Lijst minimaal','Lijst met foto','Rooster (2)','Rooster (3)','Rooster (max)'],
        };
Search = Ractive.extend({
        flush: function () {
            console.log('fliush'+'');
        }
    });
    var search = new Search({
        debug: false,
        el: 'main',
        template: '#shelf',
        data: searchDefaults,
        computed: {
            totalPrice: function(){
                //totalPrice is de prijs van de complete winkelwagen
                return this.get('savedItems').length === 0 ? 0 : (this.get('savedItems').map(function(e) { var bedrag = e.aantal * e.SalesPackagePrice; if (!e.btwper) { e.btwper = 21; alert('Geen btw bij item'); }; return search.get('prijsInBtw') ? bedrag : (bedrag - ((bedrag / 100) * e.btwper )) }).reduce(function(prev, cur){ return cur + prev })).toFixed(2);
            }
        },
        complete: function () {
            //Als de pagina geladen is, dan focus op het zoekveld
           ...