JSFiddle - React, Tailwind, and code Playground

by mistakster

HTML

<div id="results"></div>

JavaScript

var App = {};

App.Item = Backbone.Model.extend({});
App.ItemNews = App.Item.extend({isNews: true});
App.ItemAction = App.Item.extend({isAction: true});
App.ItemMessage = App.Item.extend({isMessage: true});

App.Factory = function (getter, hash, def) {
  return function () {
    var value = getter.apply(this, arguments);
    var ctor = hash[value] ? hash[value] : def;
    return new ctor(arguments[0], arguments[1]);
  };
};

App.ItemFactory = App.Factory(
  function (attr) { return attr.type; },
  {
    "news": App.ItemNews,
    "action": App.ItemAction,
    "message": App.ItemMessage
  },
  App.Item
);

_.forEach([null, 'news', 'action', 'message'], function(type) {
    var results = document.getElementById("results");
    var model = App.ItemFactory({type: type});
    var line = document.createElement("p");
    line.innerHTML = ['orig', '"' + model.get("type") + '"', !!model.isNews, !!model.isAction, !!model.isMessage].join(", ");
    results.appendChild(line);
    
    model.set("rand", Math.random());
    
    var c = model.clone();
    line = document.createElement("p");
    line.innerHTML = ['clone', '"' + c.get("type") + '"', !!c.isNews, !!c.isAction, !!c.isMessage].join(", ");
    results.appendChild(line);
    
    line = document.createElement("p");
    line.innerHTML = [model.get("rand"), c.get("rand")].join(" == ");
    results.appendChild(line);
    
    line = document.createElement("p");
    line.innerHTML = [model.cid, c.cid].join(" != ");
    results.appendChild(line);
    
});