DailyJS

DailyJS

The JavaScript blog.


Tagdata-binding
Featured

tutorials libraries games reactive data-binding

BindingJS, 2D Space Shooter Part 2

Posted on .

BindingJS

BindingJS (GitHub: rummelj / bindingjs, License: MPL) by Johannes Rummel is a data binding library that seeks to separate data binding declarations from HTML. It has a Less-inspired syntax for defining bindings, which you can put in a script element with the text/binding type.

JavaScript is used to set things up, and the API is fluent, so you can chain calls to configure things like the template fragment that a binding document applies to.

The binding syntax is similar to CSS, but because it's influenced by Less you'll find it easier to group properties with nesting.

Data is accessed through "adapters", so it's fairly easy to customise it to existing applications:

There are multiple view adapter such as value, text, attr or on that are already included in BindingJS. The qualifier of an adapter is a static instruction for the Adapter and is written directly behind the prefix, if that is only one character long. Otherwise it is separated by a colon from the prefix.

I like the idea of a CSS selector data binding language, but the expressions it uses are terse so it may take some effort to get the hang of BindingJS. Also, I think it would work well with custom elements, so it would be worth experimenting with that.

Part 2 of How to Make a 2D Space Shooter in Unity

Thomas Palef sent in part 2 of How to Make a 2D Space Shooter in Unity. This is the tutorial series that uses Unity's JavaScript API. In this part Thomas adds enemies and collision handling as well.

Featured

functional ui mvvm data-binding

Why Ramda?, Two-Way Data Binding Review

Posted on .

Why Ramda?

Scott Sauyet sent in Why Ramda?, a post that attempts to explain the Ramda library:

To those not used to functional programming, Ramda seems to serve no purpose whatsoever. Most of its major capabilities are already covered by libraries like Underscore and LoDash.

These folks are right. If you want to keep coding with the same imperative and object-oriented styles you've been using, Ramda does not have much to offer you.

However, it does offer a different style of coding, a style that's taken for granted in purely functional programming languages: Ramda makes it simple for you to build complex logic through functional composition. Note that any library with a compose function will allow you do functional composition; the real point here is: "makes it simple".

The article builds on the functional composition idea and leads up to the kind of data-focused programming that Ramda makes possible.

Two-Way Data Binding Review

Two-Way Data Binding by Nikita Vasilyev is a review of two-way data binding in Backbone, React, Angular, Meteor and plain JavaScript.

It highlights an issue that some libraries might have if they change fields at the wrong time:

The problem is that data flows from an input field to a model, and then back to the same input field, overriding the current value even if it's exactly the same.

React.js doesn't have Backbone's problem with moving the cursor position. Its virtual DOM, a layer between the actual DOM and React's state, prevents React from unnecessary DOM changes.

There's also an informative comment by Leo Horie about the effort required to learn each framework:

Something that strikes me about the framework versions is the amount of framework-specific knowledge required to get these examples working. It's one thing to say "here's a version in framework X", and it's quite another to actually write the code (from the standpoint of someone who's still considering framework options and who is not familiar with the lingo and caveats for any of them.)

Featured

libraries data-binding mmvm

Ripple.js

Posted on .

Ripple.js (GitHub: ripplejs / ripple, License: MIT) from Segment.io is a library for templating and data binding. It's based around templates, and has a chainable API, allowing plugins to be added to components:

var Person = ripple('<div>{%raw%}{{name}}{%endraw%}</div>')  
  .use(events)
  .use(each)
  .use(dispatch);

var person = new Person({  
  name: 'Tom'
});

person.appendTo(document.body);  

The plugins can add directives in a similar way to AngularJS: take a look at each, for example.

There's a JSFiddle Markdown example that uses a template embedded in a script element, and two plugins: ripple.events and ripple.markdown. The plugins allow changes to be observed on the textarea and Markdown is set to render using a directive on a div element.

One of the features that I like is the pattern for view composition. Views can be embedded, and data will still be synced when it changes.

Also, the library seems well tested, so you can get more usage ideas from the tests.

Featured

dom angularjs data-binding

AngularJS Infinite Scroll, Bindable.js

Posted on .

AngularJS Infinite Scroll

This project made me wonder if AngularJS modules are the new jQuery plugins: lrInfiniteScroll (GitHub: lorenzofox3 / lrInfiniteScroll, License: MIT), by Laurent Renard. It's a small and highly reusable library that is specifically tailored to work well with Angular's API.

It attaches an event handler to an element that fires when the element has been scrolled to the bottom. You can use it to automatically load items on demand, Angular style:

<ul lr-infinite-scroll="myEventHandler" scroll-threshold="200" time-threshold="600">  
  <li ng-repeat="item in myCollection">
</ul>  

Bindable.js

Data binding libraries are often coupled to view objects. Bindable.js (GitHub: classdojo / bindable.js, License: MIT) from ClassDojo (and Craig Condon) is a more generic bidirectional data binding library. Bindable objects are constructed, and then properties can be bound to callbacks:

var person = new bindable.Object({  
  name: 'craig',
  last: 'condon',
  location: {
    city: 'San Francisco'
  }
});

person.bind('location.zip', function(value) {  
  // 94102
}).now();

// Triggers the binding
person.set('location.zip', '94102');  

Bindable objects emit other events (change, watching, dispose), and there are methods for introspection (bindable.has), context (bindable.context), and triggering callbacks after they're defined (.now).