raziloBind

raziloBind is the daddy package of the tool, think of it as a meta package, wrapper etc. The daddy bundles all parts of the system, configures it, injects all default injectables and adds three methods to attach custom injectables. All this is pulled together and offered as a single import, resolving the tool to 'RaziloBind'.

Who's ya Daddy?

The daddy package is a nice way to keep the tool modular, it allows us to be more flexible with the tool, allowing each part of the tool to be replaced easily should you want to. You don't have to use the daddy, if you prefer you can let your daddy be in charge, or just pull in the raziloBind Core directly, along with any injectables.

Why have a Daddy?

It makes things simple, for those who just want the default system, which is probably a high percentage of users. You can import all parts, configure it, and use it in a few lines of code. Other benefits are installation, all parts of the system will be installed by default when you choose 'The Daddy'.

What are the Dependancies?

We will aim to be dependancy free, of course this package depends on other parts of the razilobind collection, and there is also the compilation development dependancies like grunt/gulp, babel etc... Whilst we try to be dependancy free in the actual razilobind library, we do bundle some code, such as dateFormat https://github.com/felixge/node-dateformat by Steven Levithan . We bundle this because it is not native ES6 and because it is small enough to put into the alterer class directly.

The only real dependancy we have at present, and it is not so much a dependancy really, is the proxy polyfill. This is what we use to polfill Proxy() in browsers that do not yet support it. So Chrome and FF will not need it and will ignore it, IE will use it down to IE 9 so expect a little delay here. Proxy() is used to observe changes on the model, so you will need to add this to your HTML head section if you want support down to IE9, this will be pulled in automagically with npm install, feel free to use it anywhere in your project without worry.

Why Another Framework?

This is not framework! It's a library. Frameworks force you to work in a specific fashion, do things in a specific way, force architecture whilst giving you the tools to complete a job. They offer a blueprint, foundations and the means to do the job. Moving from one framework to another can be a pain and code is not always portable, they tie you in! Frameworks are great tools, if you are happy to accept these caveats.

Libraries on the other hand tend to be lighter, offer a means to do specific task/tasks, are more focussed, more easily ported, stay away from decisions you should be able to make yourself and should allow you to be more flexible. They can be switched out for something similar when needed, or extended, forked to add your own sugar. Less time or don't care about choice, use a framework, more time or like flexibility, use a library.

Why another? Because I have yet to find a nice ES6 library that is easily extendabled, hackable/makeyourownable, allows for fine grain choice of what you build in, and because choice is good is it not?

Why ES6?

It's the future of JS, is vanilla JS (which I like), is clean, is more modular, offers better organisation of code and using via imports is a breeze! So why would you not?

Whats Supported?

Proper browsers in evergreen state, IE down to IE9 through polyfills (compile using babels es2015-loose preset). At present we are only polyfilling Proxy() with our hybrid proxy-oo-polyfill.

ES5 Distributable?

There isn't one, I am sure it would be quite simple to build one from the source files if you wanted one, we can't suppor this, it kind of defeats the object of being an ES6 module.

Daddy Usage

Using the tool in the default 'dadd'y manner, is as simple as following the instruction below. You can pull in teh whole tool with a single package, import the tool with a single line and have it configured in the default way to give you all the injectables you will need, look below.

Advanced Usage

If you wish to have greater control, want to customize your injectables, and generally use raziloBind at it's base level, why not take a look at the core docs. The core docs will get you started creating your own daddy package, extending core or using the tool in a none default way.

To pull in raziloBind and all dependdancies, you can use just pull in teh daddy package...

npm install razilobind

Core, binder, resolver and alterer (along with any polyfill's) will all be pulled along too.

Usage Example

Dont forget, for advanced usage, use the core package, otherwise continue as follows, remember to compile to ES6 peeps!

Oldy Worldy Style

import RaziloBind from 'razilobind'

// Create a model
var model = {foo: 'foo', bar: 'bar'};

// Bind
let rb = new RaziloBind(); // prefix with {prefix: 'raz'}
rb.bind('#test', model);

Object Orientated Style

/* hello-world.js */
import RaziloBind from 'razilobind'

export default class HelloWorld {
  constructor(element) {
    // set up properties
    this.something;
    this.somethingElse;

    // bind it, just bind it ;)
    let rb = new RaziloBind(); // add prefix with {prefix: 'raz'}
    rb.bind(element, this);
  }

  yourMethodOne() { ... }

  yourMethodTwo() { ... }
}

/* index.js file, start of your app */
import HelloWorld from './hello-world.js'

new HelloWorld('#hello-world-app');

Use in your HTML

<!-- without prefix -->
<span bind-text="foo"></span>
<span bind-show="foo">Show or hide</span>
<ul>
  <li bind-for="['a','b','c']">
    <span bind-text="$key"></span>
    <span bind-text="&value"></span>
  </li>
</ul>

<!-- with prefix -->
<span raz-bind-text="'Something'"></span>
<span raz-bind-show="foo" raz-alter-show="'not'">Show or hide</span>
<ul>
  <li raz-bind-for="{'a':'aaa','b': 'bbb'}">
    <span raz-bind-text="$key"></span>
    <span raz-bind-text="&value"></span>
  </li>
</ul>

Configuration

At present there is only one configuration option, that is to prefix or not to prefix (that is the question!). Prefix all razilobind attributes by passing in the prefix option. The following will pass in the prefix 'raz' to access via 'raz-bind-???', 'raz-alter-???' etc.

var foo = new RaziloBind({prefix: 'raz'});

What Injectables do I Need?

Thats up to you and what you want to do, I would recommend pulling in te parent package as the default binders will offer a level of standard functionality, things you should need. To find out what injectables are available, head on over to the following places.

Binders

Binding object properties to elements to do various things.

Resolvers

resolving attribute data to things like strings, numbers, objects, methods etc.

Alterers

Altering resolved data to something else without affecting the model.

Can I Create my own Injectables?

Sure, why not, you even get to choose how to inject them, if you want the default ones or just your own. You can do this by directly adding them to razilobind, or by injecting them into razilobind-core if you are extending core with your own module. See the necessary area listed above for details on how to create and inject binders, resolvers and alterers.