Skip to content
Wrapper around Synapse for easy data binding between models and views.
CoffeeScript Shell
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist
node_modules
src
test
.travis.yml
GPL-LICENSE
MIT-LICENSE
README.rst
make.sh
package.json

README.rst

Backbone.DataLink

Travis CI build status

Simple wrapper around Synapse to keep data between your Backbone models and views in sync.

Requirements

Synapse must be installed and configured with both the jQuery and Backbone Model hook.

Installation

The library itself can be installed via the volo package manager:

volo add passy/backbone.datalink

Alternatively, you can grab the latest version here:

Backbone.DataLink supports the UMD and can be loaded in CommonJS environments, via AMD and as traditional browser script.

require(['synapse', 'synapse/jquery', 'synapse/backbone-model', 'datalink'],
    function (Synapse, JQueryHook, BackboneModelHook, DataLink) {
        Synapse.hooks = [Synapse, JQueryHook, BackboneModelHook];
    }
)

Example

To sync the elements title and description of your model with the corresponding input fields in your rendered view, add this after your rendering is done:

datalink.linkView(this, ['title', 'description'])

Your template may look like this:

<input data-bind=title>
<textarea data-bind=description>

To override the default settings, provide a hash as third parameter:

datalink.linkView(this, ['title', 'description'], {prefill: false})

To override certain settings for specific elements, provide a fourth parameter:

datalink.linkView(this, ['title', 'description'], {prefill: true}, {
    'title': {attribute: "name"},
    'description': {prefill: false}
})

Options

  • bind, default syncWith
    • Binding function. One of 'syncWith', 'observe' or 'notify'.
  • attribute, default data-bind
    • HTML attribute to look for to map model attributes.
  • ignoreEmpty, default false
    • If false, raises an exception if an element could not be bound.
  • prefill, default true
    • Fill observed elements with model data on load.
  • triggerOnBind, default false
    • Fire change event after binding.

Alternatives

There are some projects with similar goals:

License

Dual licensed under the MIT or GPL Version 3 licenses.

Something went wrong with that request. Please try again.