I want to use Coffeescript to create an UIObject class. This class should inherit from jQuery, so that instances of UIObject can be used as if they where created with jQuery.
class UIObject
isObject: (val) -> typeof val is "object"
constructor: (tag, attributes) ->
@merge jQuery(tag, attributes), this
@UIObjectProperties = {}
merge: (source, destination) ->
for key of source
if destination[key] is undefined
destination[key] = source[key]
else if @isObject(source[key])
@merge(source[key], destination[key])
return
It partially works. Consider the Foobar class below:
class Foobar extends UIObject
constructor: -> super("<h1/>", html: "Foobar")
$("body").append(new Foobar) works fine. BUT: (new Foobar).appendTo("body") places the tag, but also raises RangeError: Maximum call stack size exceeded.
Was it just a bad idea to inherit from jQuery? Or is there a solurion?
For those who don't know CoffeeScript, the JavaScript source is:
var Foobar, UIObject;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
function ctor() { this.constructor = child; }
ctor.prototype = parent.prototype;
child.prototype = new ctor;
child.__super__ = parent.prototype;
return child;
};
UIObject = (function () {
UIObject.prototype.isObject = function (val) {
return typeof val === "object";
};
function UIObject(tag, attributes) {
this.merge(jQuery(tag, attributes), this);
this.UIObjectProperties = {};
}
UIObject.prototype.merge = function (source, destination) {
var key;
for (key in source) {
if (destination[key] === void 0) {
destination[key] = source[key];
} else if (this.isObject(source[key])) {
this.merge(source[key], destination[key]);
}
}
};
return UIObject;
})();
Foobar = (function () {
__extends(Foobar, UIObject);
function Foobar() {
Foobar.__super__.constructor.call(this, "<h1/>", {
html: "Foobar"
});
}
return Foobar;
})();
