Core

The core is the basic part of the tool, it allows us to configure the tool with the right amount of injectables (binders, alterers and resolvers), set any options and return an instance of the core for us to bind a dom element and js object model too.

What is the Core For?

The core is the basic part of the tool, it allows us to configure the tool with the right amount of injectables (binders, alterers and resolvers), set any options and return an instance of the core for us to bind a dom element and js object model to.

Why is it Seperate?

Because it's modular, it allows you to extend the core to auto configure (as we do in razilobind package). It also allows you to build your own core, fork this one and still use the injectables. It is much more flexible to do it this way.

Daddy Usage

The recommended way to use core, is through the daddy razilobind package, go there to use raziloBind in its default manner. This will give you the standard use and configure the tool with default injectables, give you additional functions to add custom binders and expose the tool as 'RaziloBind' for use in any ES6 project.

Advanced Usage

If you wish to have greater control, want to customize your injectables, and generally use raziloBind at it's base level, pull in the core by its self. This will allow you to specify which parts of the tool (the injectables) you wish to load in, or maybe you want ot use your own injectables. You can use the core in oldy worldy or ES6 fashion, but both will require an ES6 compile to ES5.

Compiling

You will need to compile these modules, with your own code, to create a distributable todayScript file that current browsers can read, as the ES6 standard does not have huge support at present, this will change for sure. For now you will need to compile using babel and a task runner, with babel presets. To get IE9 and above support you must use the 'es2015-loose' preset for parent constructor support, in your package file.

If you do decide to use the tool in the advanced way, you will need to pull in the core and it's dependancies, you can do so with...

npm install razilobind-core razilobind-alterer razilobind-binder razilobind-resolver

This will pull in core and all injectables (not dependancies of core as you do not have to use them, you can use your own!)

Usage Example

Dont forget, for default usage, use the daddy raziloBind package, otherwise continue as follows, remember to compile to ES6 peeps!

Oldy Worldy Style

import {RaziloBindCore, RaziloBindCoreDetector} from 'razilobind-core'
import {RaziloBindTrimAlterer, ...} from 'razilobind-alterer'
import {RaziloBindForBinder, ...} from 'razilobind-binder'
import {RaziloBindBooleanResolver, ...} from 'razilobind-resolver'

// Inject injectables, pull in what you need!
RaziloBindCoreDetector.defaultAlterers = {TrimAlterer: RaziloBindTrimAlterer, ...};
RaziloBindCoreDetector.defaultBinders = {ForBinder: RaziloBindForBinder, ...};
RaziloBindCoreDetector.defaultResolvers = {BooleanResolver: RaziloBindBooleanResolver, ...};

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

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

Object Orientated Style

/* your-binder.js */
import {RaziloBindCore, RaziloBindCoreDetector} from 'razilobind-core'
import {RaziloBindTrimAlterer, ...} from 'razilobind-alterer'
import {RaziloBindForBinder, ...} from 'razilobind-binder'
import {RaziloBindBooleanResolver, ...} from 'razilobind-resolver'

export default class YourProjectBind extends RaziloBindCore {
  constructor(options) {
    super(options);

    // Inject injectables, pull in what you need!
    RaziloBindCoreDetector.defaultAlterers = {TrimAlterer: RaziloBindTrimAlterer, ...};
    RaziloBindCoreDetector.defaultBinders = {ForBinder: RaziloBindForBinder, ...};
    RaziloBindCoreDetector.defaultResolvers = {BooleanResolver: RaziloBindBooleanResolver, ...};
  }
}

/* your-app.js */
import YourBinder from './src/your-binder.js'

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

// bind
let rb = new YourBinder(); // you can send in prefix with {'prefix': 'raz'} if you want to.
rb.bind(element, this);

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 to core (if you pass into parent raziloBind package, this passes on to core too!). The following will pass in the prefix 'raz' to access via 'raz-bind-???', 'raz-alter-???' etc.

var foo = new RaziloBindCore({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.