ptt-binding

ptt-binding

It enables to extend PTT document with data binding capability.

Data binding suppport for each component and its props can be simple added by extending PTT Node by

• bindings - component bindings - corresponds to component props, each prop can have its own binding exporession

{
 "name": "Hello World Example",
 "elementName": "PTTv1",
 "containers": [
    {
     "name": "My first container",
     "elementName": "Container",
     "style": { "top": 0, "left": 0, "height": 200, "width": 740, "position": "relative" },
     "boxes": [{
        "name": "My first text",
        "elementName": "TextContent",
        "style": { "top": 0, "left": 0 },
        "props":{
            "content": "Hello world"
            }
        },
        bindings":{
            "content": "data.message"
            }
        }]
    }]
}

The binding expression path data.message is evaluated before rendering occurs and the value Hello world is replaced with the data binding result.

Features

• supports mutable + immutable data structures
• supports reactions using mobx - reactive virtual dependency state graph that is only updated when strictly needed and is never stale

Main goal

• strictly separate content description from content applying
• render effectivally UI and react to data changes effectively.

Content desription

• schema is framework agnostic content description PTT document
• data is fremework agnostic data descriptin (plain JSON).
• binding is framework agnostic connection between schema and data ptt-binding.

Content applying

• react provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations
• freezer provides hiearchy immutable data structure to help react to update only the right part of UI
• mobx provides reactive virtual dependency state graph that is only updated when strictly needed and is never stale.

Examples

• To use the ptt-binding with immutable ptt-schema using freezer-js and mobx reaction class in a JavaScript file -

//import
var Freezer = require('freezer-js');
var reaction = require('mobx').reaction;
var Binder = require('react-binding').default;

//ptt-binding
var initBindings = require('ptt-binding').initBindings;
var freezerCursor = require('ptt-binding').freezerCursor;

var schema = {}
var data = {}

var freezer = new Freezer(schema);
var dataContext = Binder.bindTo(data);

//init bindings for current schema with data context
initBindings(new freezerCursor(freezer), freezer.get(), dataContext,reaction);

• To use the ptt-binding with simple mutable plain JSON object and without reactions class in a JavaScript file -

//import
var Binder = require('react-binding').default;

var initBindings = require('ptt-binding').initBindings;
var simpleCursor = require('ptt-binding').simpleCursor;

var schema = {}
var data = {}

//exec
initBindings(new simpleCursor(schema), schema, Binder.bindTo(data));