Beautiful bindings and nothing else
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
.gitignore
LICENSE
build.js
index.html
jquery.js
observe.polyfill.js
readme.md
shibari.js
shibari.min.js
test.js
underscore.js
underscore.observable.js

readme.md

Shibari.js

Shibari.js is a minimalistic library for binding of objects to HTML UI.

Project Status: Alpha

Current Features:

  • Two-way binding on inputs
  • Dynamic Array-binding
  • Converters
  • Subcontexts
  • Binding modes

Planned Features:

  • Unbinding
  • Validators
  • Remove/contain jquery dependency
  • Remove/contain underscore dependency

Download:

Compressed: download

Important Notes:

  • This library makes use of Object.observe or a polyfill if not present
  • Currently the only two-way bindings occur with input values
  • Currently depends on jquery and underscore ( make sure you include them wherever you put shibari.min.js ).

Example Usage:

<div id="component">
    <input type="text" data-bind-value="fname">
    <input type="text" data-bind-value="lname">
    <a data-bind-content="url"></a>
</div>
var person = {
    fname: "Richard",
    lname: "Anaya",
    url: "http://github.com/richardanaya"
};

Shibari.bind(document.getElementById('component'),person);

Example Converter:

<div id="component">
   <input type="text" data-bind-value="name">
   <input type="text" data-bind-value="path:price,converter:money">
</div>
var item = {
   name: "Beer",
   price: 2.5
};

Shibari.addConverter("money",
{
   to: function(value){ return "$"+value; },
   from: function(value){ return parseFloat(value.substring(1)); }
});

Shibari.bind(document.getElementById('component'),item);

Example Template:

<div id="component" data-bind-template="developers">
    <div class="developer">
        <span data-bind-content="lastname"></span>, <span data-bind-content="firstname"></span>
    </div>
</div>
var roster = {
    developers : [
        {firstname:"Howard",lastname:"Smith"},
        {firstname:"Jason",lastname:"Dunn"},
        {firstname:"Jack",lastname:"Standard"},
        {firstname:"Richard",lastname:"Anaya"}
    ]
};

Shibari.bind(document.getElementById('component'),roster);

//do whatever operations you want on the array itself
roster.developers.sort(function(a,b){
    if(a.lastname<b.lastname) return -1;
    if(a.lastname>b.lastname) return 1;
    return 0;
})

Example: Grocery List:

You can view a more complex example of using shibari.js at the grocery list demo.

How to build:

npm install buildify
node build.js