Skip to content

Latest commit

 

History

History
60 lines (43 loc) · 2.62 KB

README.md

File metadata and controls

60 lines (43 loc) · 2.62 KB
Raw

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.