JSFiddle - React, Tailwind, and code Playground

by aedry

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<li class="qb-headline-item qb-js-headline-item headline-id-54944efc707b210c66e46464" data-model-cid="c381">
    <div class="qb-tabbed-panel-item story-info-wrapper"> 
        <span class="qb-pub-date qb-js-pub-date">2m</span>
 <span class="qb-publisher-name"> / Informa Global Markets</span>
 <span class="qb-js-headlines-price qb-headlines-price">$0.10</span>
        <figure class="qb-tabbed-item-content">
            <div class="qb-story-headline">NZD/USD TECH -</div>
            <div class="qb-promo-text">Actionable trading strategies with support and resistance levels</div>
        </figure>
    </div>
</li>

JavaScript

var MacbookPro = Backbone.View.extend({

    addEngraving: function () {},
    addParallels: function () {},
    add4GBRam: function () {},
    add8GBRam: function () {},
    addCase: function () {},
    getPrice: function () {
        // Base price
        return 900.00;
    }

});

var Decorator = function (macbook) {
    this.macbook = macbook;
};

Decorator.prototype = {

    addEngraving: function () {
        return this.macbook.addEngraving();
    },
    addParallels: function () {
        return this.macbook.addParallels();
    },
    add4GBRam: function () {
        return this.macbook.add4GBRam();
    },
    add8GBRam: function () {
        return this.macbook.add8GBRam();
    },
    addCase: function () {
        return this.macbook.addCase();
    },
    getPrice: function () {
        return this.macbook.getPrice();
    }

};

var CaseDecorator = function (macbook) {
    this.macbook = macbook;
};

_.extend(CaseDecorator, Decorator)

CaseDecorator.prototype.getPrice = function () {
    return this.macbook.getPrice() + 45.00;
};

var GBRamDecorator = function (macbook) {
    this.macbook = macbook;
};

_.extend(GBRamDecorator, Decorator);

GBRamDecorator.prototype.add32GBRam = function () {
    return 'added 32GB';
}
GBRamDecorator.prototype.getPrice = function () {
    return this.macbook.getPrice() + 145.00;
};

var macbook = new MacbookPro();
var decorator = new CaseDecorator(macbook);
var gbdecorator = new GBRamDecorator(macbook);

console.dir(macbook.getPrice());
console.dir(decorator.getPrice());
console.dir(gbdecorator.getPrice());