JSFiddle - React, Tailwind, and code Playground

JavaScript

enyo.kind({
    name: "Example.Collection",
    kind: "enyo.Collection",
    total: 0,
    observers : {
        observeLength: ['length']   
    },
    observeLength: function() {
        this.reTotal();
    },
    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.price || 0;
		});
		this.set("total", total);
    }
});

enyo.kind({
    name: "Example.App",
    components: [
        {kind:"Example.Collection", name: "collection"},
        {name:"Total"}
    ],
    bindings:[
        {from:".$.collection.total", to:".$.Total.content"}   
    ],
    create: enyo.inherit(function(sup) {
        return function() {
            sup.apply(this, arguments);
            this.$.collection.add([
                {price: 20},
                {price: 30},
                {price: 40},
            ]);
        };
    })
});

enyo.ready(function(){
    new Example.App().renderInto(document.body);
});