Pflock

Pflock is a component for binding data to input fields, content editables etc.

It works in both directions. When the data changes Pflock can update the document and the other way around.

Demo

Installation

$ component install manuelstofer/pflock

Binding Syntax

Bindings are done using x-bind attribute. It uses JSON pointers to describe the path in an object.

Bind value

<input type="text" x-bind="value:/user/name" />

Bind inner HTML

<p contenteditable x-bind="/user/description"></p>

Bind attribute

<img src="image.jpg" x-bind="src:/user/image"/>

Bind arrays

Pflock can handle arrays. Thanks to t8g

var data = {
    users: [
        {name: 'Laurence', age:37},
        {name: 'Thomas', age:38},
        {name: 'Sarah', age:1},
    ]
};

When using the x-each, Pflock will use the child node as a template and clone it for every item.

<ul x-each="/users">
    <li>
        <span x-bind="/users/x/name"></span> 
        [<span  x-bind="/users/x/age"></span>]
    </li>
</ul>

<ul x-each="/users">
    <li x-bind="/users/x/name"></li>
</ul>

Usage

var pflock = require('pflock');
var data = {
  user: {
    name: 'Pflock',
    description: 'two way bindings'
  }
};

var bindings = pflock(document.body, data);

bindings.on('path-changed',  function (path, value) {

});

bindings.on('changed',  function (data) {

});

Backbone models

There is an adapter to use Pflock with Backbone.js models: Backbone-Pflock

Templating

Pflock has no built in template engine. Any engine will work just fine.

Richard Parker was built to be used together with Pflock. It makes it easy to create the bindings by keeping track over the binding pointer when you iterate over objects or arrays.