JSFiddle - React, Tailwind, and code Playground

JavaScript

enyo.kind({
	name: "ex.Collection",
	kind: "enyo.Collection",
	total: 0,
  instanceAllRecords: true,
    
    create: enyo.inherit(function(sup) {
        return function() {
            sup.apply(this, arguments);
            this._retotalListener = enyo.bind(this, "retotal");
            this.addListener("add", this._retotalListener);
            this.addListener("remove", this._retotalListener);
        };
    }),
    destroy: enyo.inherit(function(sup) {
        return function() {
            sup.apply(this, arguments);
            this.removeListener("add", this._retotalListener);
            this.removeListener("remove", this._retotalListener);
        };
    }),
    
	recordChanged: enyo.inherit(function(sup) {
		return function(rec) {
			sup.apply(this, arguments);

			if(rec.changed.hasOwnProperty("price")) {
				this.retotal();
			}
		};
	}), 
	retotal: function() {
		var total = 0;
		enyo.forEach(this.records, function(r) {
			total += r.get("price") || 0;
		});

		this.set("total", total);
	}
});

enyo.kind({
    name: "ex.App",
    bindings: [
        {from:".data.total", to:".$.total.content"}
    ],
    components: [
        {kind:"onyx.InputDecorator", layoutKind:"FittableColumnsLayout", style:"display:block", components:[
            {content:"Total:"},
            {name:"total", fit:true}
        ]},
        {kind:"onyx.Button", content:"Add a $10 item", ontap:"add10"},
        {kind:"onyx.Button", content:"Incr first by $20", ontap:"add20"}
    ],
    create: enyo.inherit(function(sup) {
        return function() {
            sup.apply(this, arguments);
            this.set("data", new ex.Collection());
            this.data.add([
                {price: 20},
                {price: 30},
                {price: 40}
            ]);
        };
    }),
    add10: function() {
        this.data.add({price:10});
    },
    add20: function() {
        var r = this.data.at(0);
        r.set("price", r.get("price")+20);
    }
});

new...