JSFiddle - React, Tailwind, and code Playground

by viatropos

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<div id='logger'></div>

CSS

.error {
    color: red;
}
.result {
    color: blue;    
}

JavaScript

var logger = function(method) {
  var string = '<p>' + this.toString() + '["' + method + '"] called</p>';
  $('#logger').append(string);
    
  var result;
  
  if (this._super) {
    string = '<p>Object ' + this.toString() + ' has \'_super\'!</p>';
    $('#logger').append(string);
    result = this._super();
  } else {
    string = '<p class="error">Object ' + this.toString() + ' has no method \'_super\'</p>';
    $('#logger').append(string);
  }

  if (typeof result != 'object' || result == null) {
    result = {};
  }

  string = '<p class="result">Result: ' + JSON.stringify(result) + '</p>';

  $('#logger').append(string);
    
  return result ? result : {};
}

var createMixin = function(methods) {
  var mixin = {};
  for (var i = 0; i < methods.length; i++) {
    mixin[methods[i]] = createMethod(methods[i]);
  }
  return mixin;
}

var createMethod = function(name) {
  return function() {
    return logger.call(this, name);
  };
}

var testMethodsOnKlass = function(klass, methods) {
  for (var i = 0; i < methods.length; i++) {
    klass[methods[i]]();
  }
}

var parentMethods = [
  'method set only in Parent',
  'method set in both Child and Parent'
]
var childMethods = [
  'method set in both Child and Parent'
]
var methodsAddedAfterBothWereInstantiated = [
  'methods added to both Child and Parent, after they were both instantiated'
]
var childMethodsAddedAfterBothWereInstantiated = [
  'methods added to just Child, after they were both instantiated'
]

window.App = Ember.Application.create();

App.Parent = Ember.Object.extend();
App.Parent.reopenClass(createMixin(parentMethods));

App.Child  = App.Parent.extend();
App.Child.reopenClass(createMixin(childMethods));

testMethodsOnKlass(App.Child,...