Rakefile public/app/lib/extensions.js public/assets/behaviour/vendor/diff_match_patch.js public/assets/behaviour/vendor/jsspec.js public/assets/style/vendor/jsspec.css public/vendor/mootools-trunk-1516.js @@ -1,2 +1 @@ -/make.rb -/make.rb.gz +/public/coverage .gitignore @@ -1 +1,12 @@ -var ThreadController = new Controller($('#thread'), {}); \ No newline at end of file +var ThreadController = new Class({ + Extends: Controller, + options: { + controls: { + '.threaditem': { + click: function () { + alert("I was clicked!"); + } + } + } + } +}); public/app/controllers/thread_controller.js @@ -1,9 +1,6 @@ -include('../../vendor/ejs/ejs'); - var Controller = new Class({ Implements: [Options, Events], options: { - binding: this, autoAttach: true, events: { initialized: function (controller) { @@ -11,14 +8,18 @@ var Controller = new Class({ controller.attachAll(); } } - } + }, + controls: {} }, - initialize: function (element, controls, options) { + initialize: function (element, options, binding) { this.setOptions(options); this.element = element; - this.controls = $H(controls); - this.binding = this.options.binding; - this.added = new Hash(); + this.controls = $H(this.options.controls); + if (binding) { + this.binding = binding; + } else { + this.binding = this; + } this.addEvents(this.options.events); this.fireEvent("initialized", this); }, @@ -26,6 +27,7 @@ var Controller = new Class({ this.controls.each(function (v, k) { var entry = this.controls.get(k); if (entry && !entry.noauto) { + console.debug("Attaching to %o", k) this.attach(k, forceRebind); } }, @@ -33,7 +35,7 @@ var Controller = new Class({ }, attach: function (selectorName, forceRebind) { var elements; - this.controls.each(function (controls, selector) { + this.controls.each(function attachToSelector (controls, selector) { // Bind all appropriate events, so if we have ".sel1 .sel2" in // this.controls, calling with ".sel1" will include it. if (selectorName) { @@ -47,16 +49,23 @@ var Controller = new Class({ elements = this.element.getElements(selector); // Bind to this.element if selector == 'self' - if (elements.length === 0 && selector === "self") { - elements = [this.element]; + if (elements.length === 0) { + if (selector === 'self') { + elements = [this.element]; + } else { + console.warn("Found no elements matching ", selector); + } } - elements.each(function (elem) { - if (!this.added[elem]) { - this.added[elem] = []; + elements.each(function attachToElem (elem) { + console.debug("Attaching events to %o.", elem) + if (!elem.retrieve('controller:events')) { + elem.store('controller:events', []); } + $H(controls).each(function (fn, evName) { - if (this.added[elem].contains(evName) && !forceRebind) { + if (elem.retrieve('controller:events').contains(fn) && !forceRebind) { + console.warn("Not rebinding %o with added = %o", elem, elem.retrieve('controller:events')); return; } else { // Don't try and bind a boolean value. @@ -65,7 +74,7 @@ var Controller = new Class({ } elem.addEvent(evName, fn.bind(this.binding)); - this.added[elem].push(evName); + elem.retrieve('controller:events').push(fn); } }, this); @@ -78,7 +87,22 @@ var Controller = new Class({ }, // Name is relative to app/views directory, without an .ejs extension. renderView: function (name, data) { - return new EJS({url: '/app/views/'+name+'.ejs'}).render(data) + return new EJS({url: '/app/views/'+name+'.ejs'}).render(data); + }, + renderViewTo: function(elem, name, data) { + return new Element('div', {html: this.renderView(name, data)}).getFirst().replaces(elem); + }, + getElement: function () { + return this.element.getElement.run(arguments, this.element); + }, + waitFor: function (elem, fn) { + var ii, domElem = this.getElement(elem); + while (!domElem && ii <= 20) { + ii += 1; + domElem = this.getElement.delay(100, this, elem); + } + // TODO: cope with failure of the above. + fn.run(domElem, this); } }); public/app/lib/controller.js @@ -1,8 +1,34 @@ +Request.JSON.RESTful = new Class({ + Extends: Request.JSON, + initialize: function (model, objectId, options) { + this.parent(options); + this.model = model; + this.objectId = objectId; + }, + callback: function (fn, binding) { + this.addEvent('onFailure', function (responseObject, responseText) { + // TODO: actually FAIL! + this.model.requestFailureCallback(this.options.method, + this.objectId, + responseObject, + responseText); + fn.bind(binding)(); + }); + this.addEvent('onSuccess', function (responseObject, responseText) { + this.model.requestSuccessCallback(this.options.method, + this.objectId, + responseObject, + responseText); + fn.bind(binding)(); + }); + return this; + } +}); + var Model = new Class({ Implements: [Options, Events], options: { baseurl: '/api/rest', - name: 'dummy', events: { //requestSent: $empty, //requestCompleted: $empty, @@ -10,51 +36,52 @@ var Model = new Class({ //requestFailure: $empty } }, - initialize: function (options) { + initialize: function (name, options) { this.setOptions(options); + this.name = name; + this.requests = []; this.registry = []; this.entities = new Hash(); this.addEvents(this.options.events); }, + returnMe: function () { + return this; + }, registerGet: function () { - this.request('get').send(); + return this.request('get'); }, registerPost: function (entity) { - this.request('post').send(entity); + return this.request('post'); }, entityGet: function (id) { - this.request('get', id).send(); + return this.request('get', id); }, - entityPut: function (id, entity) { - this.request('put', id).send(entity); + entityPut: function (id) { + //return this.request('put', id); + return this.request('post', id); }, entityDelete: function (id) { - this.request('delete', id).send(); + //return this.request('delete', id); + return this.request('post', id); }, request: function (reqMethod, id) { - var reqUrl = [this.options.baseurl, this.options.name, id].clean().join('/'); - return new Request.JSON({ - method: reqMethod, + var reqUrl = [this.options.baseurl, this.name, id].clean().join('/'); + return new Request.JSON.RESTful(this, id, { url: reqUrl, + method: reqMethod, // Do sanity checking of JSON? secure: true, - // Fake PUT and DELETE requests (see MooTool source for details)? + // Fake PUT and DELETE requests? (see MooTools source for details) emulation: false, // Async callback methods: onRequest: this.fireEvent.bind(this, ['requestSent']), - onComplete: this.fireEvent.bind(this, ['requestCompleted']), - onSuccess: (function (responseObject, responseText) { - this.requestSuccessCallback(reqMethod, id, responseObject, responseText); - }).bind(this), - onFailure: (function (responseObject, responseText) { - this.requestFailureCallback(reqMethod, id, responseObject, responseText); - }).bind(this) + onComplete: this.fireEvent.bind(this, ['requestCompleted']) }); }, requestSuccessCallback: function (reqMethod, id, responseObject, responseText) { switch (reqMethod) { case 'get': - if (id !== null && id !== undefined) { + if ($chk(id)) { // entityGet this.registry.include(id); this.entities[id] = responseObject; @@ -77,6 +104,9 @@ var Model = new Class({ // entityDelete this.registry.erase(id); this.entities.erase(id); + break; + default: + break; } this.fireEvent('requestSuccess'); }, public/app/lib/model.js @@ -1,8 +1,16 @@ -include('lib/model', - 'lib/controller', - 'models/factlet', - 'models/thread', - 'controllers/thread_controller'); +/* An example master.js for a site in which every element + with class "thread" has its behaviour controlled by a + ThreadController controller. */ window.addEvent('domready', function () { -}); \ No newline at end of file + + $$('.thread').each(function (elem) { + var t = new ThreadController(elem); + + // I've found the following to be really quite + // useful when keeping track of controllers. + elem.store("thread:controller", t); + }); + +}); + public/app/master.js @@ -1,3 +1 @@ -var Thread = new Model({ - name: 'thread' -}); \ No newline at end of file +var Thread = new Model('thread'); public/app/models/thread.js @@ -1,21 +1,41 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> -<head> + <head> <title>Microfacts Specs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> - <link rel="stylesheet" type="text/css" media="screen" href="../assets/style/jsspec.css" /> - <script type="text/javascript" charset="utf-8" src="../vendor/include.js"></script> + <link rel="stylesheet" type="text/css" media="screen" href="../assets/style/vendor/jsspec.css" /> + <script type="text/javascript" charset="utf-8"> - include.set_path('..') - include('vendor/mootools-trunk-1515', - 'coverage/master', - 'assets/behaviour/jsspec', - 'assets/behaviour/diff_match_patch', - 'spec/lib/controller_spec', - 'spec/lib/model_spec') + // Let's not throw a tantrum if the browser doesn't have a console to write to. + if (!window.console || !console.firebug) { + var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"]; + + window.console = {}; + for (var i = 0; i < names.length; i += 1) { + window.console[names[i]] = function () {}; + } + } </script> -</head> -<body> -</body> + +  + <script type="text/javascript" charset="utf-8" src="../vendor/mootools-trunk-1516.js"></script> + +  + <script type="text/javascript" charset="utf-8" src="../app/lib/extensions.js"></script> + <script type="text/javascript" charset="utf-8" src="../app/lib/model.js"></script> + <script type="text/javascript" charset="utf-8" src="../app/lib/controller.js"></script> + <script type="text/javascript" charset="utf-8" src="../app/models/thread.js"></script> + <script type="text/javascript" charset="utf-8" src="../app/controllers/thread_controller.js"></script> + +  + <script type="text/javascript" charset="utf-8" src="../assets/behaviour/vendor/jsspec.js"></script> + <script type="text/javascript" charset="utf-8" src="../assets/behaviour/vendor/diff_match_patch.js"></script> + +  + <script type="text/javascript" charset="utf-8" src="../spec/lib/controller_spec.js"></script> + <script type="text/javascript" charset="utf-8" src="../spec/lib/model_spec.js"></script> + </head> + <body> + </body> </html> \ No newline at end of file public/spec/index.html @@ -3,80 +3,105 @@ describe("Controller", { returns = []; elem = new Element('div', { - id: 'myControlledElement', - html: [ '<span id="one">span one</span>', - '<span id="two" class="common">span two</span>', - '<span id="three" class="common">span three</span>' ] + 'class': 'myControlledElement', + html: [ '<span class="one">span one</span>', + '<span class="two common">span two</span>', + '<span class="three common">span three</span>' ] }); - + // We need the element in the DOM to be able to search it. elem.setStyle('display', 'none'); elem.inject(document.getElement('body')); - - spanOne = elem.getElement('#one'); - spanTwo = elem.getElement('#two'); - spanThree = elem.getElement('#three'); - c = new Controller(elem, { - 'self': { - parentElementEvent: function () { - returns.push("#myControlledElement: parentElementEvent"); - } - }, - '#one': { - eventTheFirst: function () { - returns.push("#one: eventTheFirst"); - } - }, - '#two': { - noauto: true, - controlsAdded: function () { - returns.push("#two: controlsAdded"); - } - }, - 'span': { - threeCalls: function () { - returns.push("span: threeCalls"); - } - }, - '.common': { - twoCalls: function (param) { - returns.push(".common: twoCalls(" + param + ")") + MyController = new Class({ + Extends: Controller, + options: { + controls: { + 'self': { + parentElementEvent: function () { + returns.push(".myControlledElement: parentElementEvent"); + } + }, + '.one': { + eventTheFirst: function () { + returns.push(".one: eventTheFirst"); + } + }, + '.two': { + noauto: true, + controlsAdded: function () { + returns.push(".two: controlsAdded"); + } + }, + '.three': { + bindingTest: function () { + returns.push(this.name); + } + }, + 'span': { + threeCalls: function () { + returns.push("span: threeCalls"); + } + }, + '.common': { + twoCalls: function (param) { + returns.push(".common: twoCalls(" + param + ")") + } + } } } }); + c = new MyController(elem); + }, + after_each: function () { + elem.dispose(); + try { + elem2.dispose(); + } catch(e) {} }, 'should attach its controls\' events in its element when instantiated by default': function () { - spanOne.fireEvent('eventTheFirst'); - expect(returns).should_be(["#one: eventTheFirst"]); + elem.getElement('.one').fireEvent('eventTheFirst'); + expect(returns).should_be([".one: eventTheFirst"]); }, - 'should not attach its controls\' events by default when instantiatied with option autoAttach: false': function () { - newElem = elem.clone(true, true); - newElem.inject(document.getElement('body')); - newSpanOne = newElem.getElement('#one'); - d = new Controller(newElem, c.controls, {autoAttach: false}); - newSpanOne.fireEvent('eventTheFirst'); + 'should not attach its controls\' events by default when instantiatied with option autoAttach: false': function () { + elem2 = elem.clone(); + d = new MyController(elem2, {autoAttach: false}); + elem2.getElement('.one').fireEvent('eventTheFirst'); expect(returns).should_be_empty(); }, 'should not attach a controls\' events if noauto is set to true within a selector\'s events list': function () { expect(returns).should_be_empty(); }, 'should not attach events twice (i.e. attachAll called a second time should do nothing)': function () { - c.attachAll() - spanOne.fireEvent('eventTheFirst'); - expect(returns).should_be(["#one: eventTheFirst"]); + c.attachAll(); + elem.getElement('.one').fireEvent('eventTheFirst'); + expect(returns).should_be([".one: eventTheFirst"]); }, 'should attach events twice if forceRebind is set': function () { - c.attachAll(true) - spanOne.fireEvent('eventTheFirst'); - expect(returns).should_be(["#one: eventTheFirst", "#one: eventTheFirst"]); + c.attachAll(true); + elem.getElement('.one').fireEvent('eventTheFirst'); + expect(returns).should_be([".one: eventTheFirst", ".one: eventTheFirst"]); }, 'should bind events to its element using the special selector "self"': function () { elem.fireEvent('parentElementEvent'); - expect(returns).should_be(["#myControlledElement: parentElementEvent"]); + expect(returns).should_be([".myControlledElement: parentElementEvent"]); }, 'should automatically fire controlsAdded on an element when it successfully attaches events to an elementset': function () { - c.attach('#two'); - expect(returns).should_be(["#two: controlsAdded"]); + c.attach('.two'); + expect(returns).should_be([".two: controlsAdded"]); + }, + 'should bind event functions to itself by default': function () { + c.name = "MyControllerName"; + elem.getElement('.three').fireEvent('bindingTest'); + expect(returns).should_be([c.name]); + }, + 'should bind event functions to the object specified on construction if it exists': function () { + elem2 = elem.clone(); + binding = { + name: "AnotherControllerName" + }; + d = new MyController(elem2, {}, binding); + elem2.getElement('.three').fireEvent('bindingTest'); + expect(returns).should_be([binding.name]); } }); \ No newline at end of file public/spec/lib/controller_spec.js @@ -29,26 +29,24 @@ describe('Model', { name: "three" }] ]; - Factlet = new Model({ - baseurl: 'http://localhost:5000/api/rest', - name: 'factlet' + Factlet = new Model('factlet', { + baseurl: 'http://localhost:5000/api/rest' }); - Thread = new Model({ - baseurl: 'http://localhost:5000/api/rest', - name: 'thread' + Thread = new Model('thread', { + baseurl: 'http://localhost:5000/api/rest' }); - Mock = new Model({}); + Mock = new Model('mock'); }, // TODO: can't really test this properly until we have a fixtures library. 'should fill its registry with a list of model objects from registerGet': function () { - Factlet.registerGet(); + Factlet.registerGet().send(); expect(Factlet.registry).should_not_be_null(); expect($type(Factlet.registry)).should_be('array'); }, - - // Until the above is fixed: call the callbacks directly, skipping out the + + // Until the above is fixed: call the callbacks directly, skipping out the // server call. - + // requestSuccessCallback: function (reqMethod, id, responseObject, responseText) 'should process a GET without an id as a registerGet call': function () { Mock.requestSuccessCallback('get', null, mockData[0]); @@ -81,5 +79,5 @@ describe('Model', { expect(Mock.entities.getClean()).should_be({}); expect(Mock.registry).should_be_empty(); } - + }); \ No newline at end of file public/spec/lib/model_spec.js Rantfile public/app/models/factlet.js public/assets/behaviour/diff_match_patch.js public/assets/behaviour/jsspec.js public/assets/style/jsspec.css public/coverage/controllers/thread_controller.js public/coverage/controllers/thread_controller.js.jscoverage.html public/coverage/controllers/thread_controller.js.jscoverage.js public/coverage/jscoverage-sh_javascript.js public/coverage/jscoverage-sh_main.js public/coverage/jscoverage-sh_nedit.css public/coverage/jscoverage-throbber.gif public/coverage/jscoverage.css public/coverage/jscoverage.html public/coverage/jscoverage.js public/coverage/lib/controller.js public/coverage/lib/controller.js.jscoverage.html public/coverage/lib/controller.js.jscoverage.js public/coverage/lib/model.js public/coverage/lib/model.js.jscoverage.html public/coverage/lib/model.js.jscoverage.js public/coverage/master.js public/coverage/master.js.jscoverage.html public/coverage/master.js.jscoverage.js public/coverage/models/factlet.js public/coverage/models/factlet.js.jscoverage.html public/coverage/models/factlet.js.jscoverage.js public/coverage/models/thread.js public/coverage/models/thread.js.jscoverage.html public/coverage/models/thread.js.jscoverage.js public/index.html public/vendor/compress.html public/vendor/compress.js public/vendor/include.js public/vendor/mootools-trunk-1515.js script/files_list.txt script/include.rb script/readme.txt 8c54c5854b34ee62e60aee19774cc762bd0f354b Nick Stenning nick@whiteink.com http://github.com/nickstenning/micromvc/commit/a6452646a996edbd22edb5ad85d0a35613cd692d a6452646a996edbd22edb5ad85d0a35613cd692d

2008-04-04T12:30:36-07:00

2008-04-04T11:54:34-07:00

Clean up and backport from Microfacts 7d7fae7538ef075c004f00d3f7ec941f056b2ac4 Nick Stenning nick@whiteink.com