raziloBind

ES6 JS/HTML Binding Library

An ES6 Javascript, HTML attribute binding thingy, for creating dynamic marvels via web applications. Built from 4 libraries, raziloBind Pulls in the core, binders, resolvers and alterers to give you non stop, juicy HTML binding pleasure served on an ES6 platter.

KABLAMO

Follow the project here, or the code on github. Feel free to share the love if you think we're onto something, or just share your usage.

raziloBind

raziloBind

Code Docs

Bringing it all together, razilBind Extends core, configures the library collection and puts a bow around it all. Bringing togethor the 4 parts of raziloBind in one nice little parenty, metary, wrappery type daddified module.

Core

Code Docs

The meat and two veg, traverse, detect and observe. Configure the parts you need, then watch it ride the dom.

Binders

Code Docs

Show that element who's boss, bring elements to life. Turn your HTML into an app with clean HTML code.

Resolvers

Code Docs

Turning water into wine, changing text to data. Parsing attribute text into usable data, always observing.

Alterers

Code Docs

Format the pants off your data, add, change or alter. Mold that resolved data into something wonderfull.

JS
import RaziloBind from 'razilobind'

// Your JS data model
var model = {foo: 'foo', bar: 'bar'};

// Prefix if you wish
var rb = new RaziloBind({prefix: 'raz'});

// Bind it sir!
rb.bind('#test', model);
HTML
<div id="test">
  <!-- Property of the model (two way bind, updatable) -->
  <span raz-bind-text="foo"></span>

  <!-- String Literal (one time bind, not updateable) -->
  <span raz-bind-text="'world'" raz-alter-text="{'prefix': 'hello '}></span>

  <!-- Some more, without prefix! -->
  <span bind-text="foo" alter-text="{'suffix': 'manchew'}" bind-show="true"></span>
</div>

Whoa Nelly!

What is all this madness I hear you say? Well it's another data binding tool, obviously we don't have enough already!

What is It?

raziloBind is an ES6 JS/HTML binding library for creating dynamic web applications through HTML attribute binding, use it with words that end in 'ify', 'ification'. It Pulls in 4 libraries, core, binders, resolvers and alterers, these do the boring parts. The main wrapper/container/meta package module thingy is raziloBind 'The Daddy'. Feel free to use one of many 'Buzz' words to describe its existance, why not use your bingo card to work out today's most current hipster label, we'll call it raziloBind.

What does It Do?

So what does it actually do? Well you know HTML... it's kinda boring isn't it, just stands there in the corner, you smile at it and it just waves back. raziloBind makes that stick in the mud dance, it allows you to flex your JS muscules, shake a leg and do the fandango right there on the dance floor. Just like all the other usual guys and girls invited to the party, it can loop, show, hide, change, watch, update and gyrate for the viewing pleasure of those watching.

Whats Supported?

Well you can use any proper evergreen modern browser, evergreen meaning a browser that updates itself routinely to keep it's self, well, up to date. We can do this through the use of a polyfill to patch up the missing Proxy object, which we use for monitoring models, on any browser that does not have it natively. Then we move on to Internet Explorer, well we reluctantly support IE9 and up, ensure you compile your ES6 with babels es2015-loose preset for IE9 and up support.

How Large is it?

160kb raw 80kb minified

The size is not straight forward to work out, but it is quite the athlete, it depends on your usage in your application as we compile the tool in with your application code. A good approximation, based on a simple hello world application gives favorable results with all injectables loaded.

Ok ok, I get all that, so where are all the examples then, well there are two right below.

Examples, yay!

Hello World

Get this code

You clicked that baby TIMES

Good on you, well done... keep going!

My my, you are persistent, thats enough.

Todo App

Get this code

You do not have any todos yet, add one?

Download

Github

The tool can be downloaded via Github, I would recommend using npm though people, it's really very simple and takes care of dependencies for you. Any how, heres the main projct on github. Installing manually from a download will mean you will have to look recursively through all package files to ensure you get all dependencies, seriously, it's not good!

Node and npm

Got npm? Install the tool and all dependencies simply with a single command via your command line terminal thingy. Use the flag to save to your applications package file.

npm install razilobind --save

Whant More?

So this isn't enough? Need more alterers, binders, resolvers, or have an awesome idea on what do do with this, let us know, you can get hold of us through github

More Complete Solution?

We've been working on this a while now, and it is very new, but why not head over and check out our web component helper. Create simple reusable html elements that do great things, and then use them in your app with Razilo Component

We even offer a base set of components to get going, from things like form controls to icons, structure, modal popups, messaging, SPA routing and much more look at Razilo Components