ptt-binding
v0.0.2
Published
ptt-binding
Downloads
1
Readme
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
andmobx 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));