Skip to content
A tiny little framework-agnostic JS bootstrapping thing.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md Shorten the includeScope example Sep 10, 2014
bower.json bump version Sep 10, 2014
test.html A rewrite! viewloader now matches on custom named data attributes. Apr 25, 2014
viewloader.js Add `includeScope` option Sep 10, 2014

README.md

viewloader is a tiny little framework-agnostic JS bootstrapping thing that lets you attach JS behaviour to a HTML element using data attributes.

The original version, which didn't have named data attributes, will always be available on the 1.x branch. See Releases for the latest version.

How to use it

Add data-view-component-name attributes to your HTML:

<div data-view-dropdown>
  ...
</div>
<div data-view-chat-window='{"foo":"bar"}'>
  ...
</div>

Create an object for your app that lists setup functions for each type of component.

myApp.views = {
  dropdown: function( $el ) { $el.fancyDropdown(); },
  chatWindow: function( $el, el, props) { new ChatWindowView({ el: el, foo: props.foo }); },
  // ... etc etc
};

Once the DOM is ready, run:

viewloader.execute( myApp.views );

viewloader will use the setup functions defined in your "views" object and try to match them against elements in the DOM. If there is a match it’ll call the setup function with 3 arguments:

  • $el: the jQuery-wrapped matched DOM element (i.e. $(el))
  • el: the matched DOM element
  • props: whatever value is passed into your data attribute. This can be anything parse by jQuery’s .data() function — strings, numbers, and even JSON.

viewloader will transform camelCased function names into dash-er-ized attributes in your HTML. So, as in the example above, a setup function named chatWindow will be matched by an HTML element like: <div data-view-chat-window>.

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.

viewloader.execute( myApp.views, $("#updated-dom-container") );

This can be combined with an optional third argument — includeScope — which will add the passed scope element to the list of elements to be checked against the available views.

viewloader.execute( myApp.views, $("#updated-data-view-component"), true );

Dependencies

viewloader needs either jQuery or Zepto. If you're not using either of those, it's 21 whole lines of JavaScript, so I’m sure you can rewrite it to suit your needs :)

License

viewloader is released under the MIT License

Shoutout

viewloader is just a slightly-tweaked and bower-componentized version of an idea that Toby showed me.

You can’t perform that action at this time.