diff --git a/README.md b/README.md index a25002c..c16bcd9 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,18 @@ -viewloader is a tiny little framework-agnostic JS bootstrapping thing that lets you attach JS behaviour to a HTML element using data attributes. +A slightly tweaked version of https://github.com/bensmithett/viewloader/tree/1.x-master to help us +incrementally update to v2. -## How to use it - -Add `data-view` attributes to your HTML: +With this HTML: ```html -
- ... -
+
``` -Create an object for your app that lists setup functions for each type of view. +and this JS: ```javascript -MyApp.Views = { - dropdown: function( $el ) { $el.fancyDropdown(); }, - chatWindow: function( $el, el ) { new ChatWindowView({ el: el }); }, - // ... etc etc -}; +viewloader.execute(SomeNamespace); ``` -Once the DOM is ready, run: - -```javascript -viewloader.execute( MyApp.Views ); -``` - -viewloader will find every element on the page with a `data-view` attribute and check to see if a function with that name exists on the supplied object. - -If such a function exists, it will be called 2 arguments: - -- `$el`: the jQuery-wrapped DOM element (i.e. `$(el)`) -- `el`: the DOM element - -`viewloader.execute` takes an optional second argument so you can scope execution to a particular element/set of elements. This is useful if you've updated the DOM and need to re-bind behaviour to new elements. - -```javascript -viewloader.execute( myApp.views, $("#updated-dom-container") ); -``` - -## Dependencies -viewloader needs either [jQuery](http://jquery.com/) or [Zepto](http://zeptojs.com/). If you're not using either of those, it's 13 whole lines of JavaScript... I'm sure you can rewrite it to suit your needs :) - -## License -viewloader is released under the [MIT License](http://ben.mit-license.org/) +viewloader will automagically call `new SomeNamespace.SomeThing($el, el)` -## Shoutout -viewloader is just a slightly-tweaked and bower-componentized version of an idea that [Toby](https://github.com/tobico) showed me. +(Transforming the first letter to lowercase is a specific requirement of our use case) diff --git a/bower.json b/bower.json index 928663e..91fc999 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,8 @@ { - "name": "viewloader", + "name": "viewloader-envato", "main": "viewloader.js", - "version": "1.0.1", - "homepage": "https://github.com/bensmithett/viewloader", + "version": "1.0.1-envato", + "homepage": "https://github.com/envato/viewloader", "authors": [ "Ben Smithett " ], diff --git a/test.html b/test.html index bb09ecd..7489d6c 100644 --- a/test.html +++ b/test.html @@ -5,10 +5,12 @@ Super Awesome Test Runner -
+
-
-
+
+
+ +
@@ -20,18 +22,57 @@ var results = document.getElementById( "test-results" ); // When an object is supplied as the first argument - // It calls setup functions from that object - viewloader.execute({ - single: function ( $el, el ) { - $el.addClass("single-ready"); - }, - multiple: function ( $el, el ) { - $el.addClass("multiple-ready"); - } - }); + // It calls setup functions from that object with the `new` keyword + + + var views = { + + // Generated from this coffee: + + // class SingleThing + // constructor: ($el, el) -> + // @do($el); + + // do: ($el) -> + // $el.addClass("single-ready"); + + SingleThing: (function() { + function SingleThing($el, el) { + this["do"]($el); + } + SingleThing.prototype["do"] = function($el) { + return $el.addClass("single-ready"); + }; + return SingleThing; + })(), + + + + // Generated from this coffee: + + // class MultipleThing + // constructor: ($el, el) -> + // @do($el); + + // do: ($el) -> + // $el.addClass("multiple-ready"); + + MultipleThing: (function() { + function MultipleThing($el, el) { + this["do"]($el); + } + MultipleThing.prototype["do"] = function($el) { + return $el.addClass("multiple-ready"); + }; + return MultipleThing; + })() + }; + + viewloader.execute(views); results.innerHTML += $(".single-ready").length === 1 ? "pass" : "FAAAAIL"; results.innerHTML += $(".multiple-ready").length === 2 ? "pass" : "FAAAAIL"; + // Also, if there are no errors, the doesntExist version passed. diff --git a/viewloader.js b/viewloader.js index dcb4912..7430d95 100644 --- a/viewloader.js +++ b/viewloader.js @@ -1,16 +1,21 @@ (function (root, factory) { - root.viewloader = factory({}, (root.jQuery || root.Zepto || root.$), root); -}(this, function(viewloader, $, root) { + root.viewloader = factory({}, (root.jQuery || root.Zepto || root.$)); +}(this, function (viewloader, $) { "use strict"; + var capitaliseFirstLetter = function (string) { + return string.charAt(0).toUpperCase() + string.slice(1); + }; + viewloader.execute = function (views, $scope) { var $els = $scope ? $scope.find("[data-view]") : $("[data-view]"); $els.each(function(i, el) { var $el = $(el); - var view = $el.data("view"); + var view = capitaliseFirstLetter($el.data("view")); + if (view && views[view]) { - views[view]($el, el); + new views[view]($el, el); } }); };