backbone.databinding

The plugin implements a two-way data binding between views and models/collections.

Backbone.DataBinding

The plugin implements a bidirectional data binding between views and models/collections.

Dependencies:

var model = new Backbone.Model();
var view = new Backbone.View({ model: model }), modelBinder = new Backbone.ModelBinder(view);
<output name="output-html"></output>
modelBinder.define('html:output-html', {
    selector: '[name="output-html"]'
});
<output name="output-text"></output>
modelBinder.define('text:output-text', {
    selector: '[name="output-text"]'
});
<input type="text" name="text-input-value">
modelBinder.define('value:text-input-value', {
    selector: '[name="text-input-value"]'
});
<textarea name="textarea-value"></textarea>
modelBinder.define('value:textarea-value', {
    selector: '[name="textarea-value"]'
});
<select name="single-select-value">
    <option value="A">Option A</option>
    <option value="B">Option B</option>
</select>
modelBinder.define('value:single-select-value', {
    selector: '[name="single-select-value"]'
});
<select name="multiple-select-value" multiple>
    <option value="A">Option A</option>
    <option value="B">Option B</option>
</select>
modelBinder.define('value:multiple-select-value', {
    selector: '[name="multiple-select-value"]'
});
<input type="checkbox" name="single-checkbox-input-checked">
modelBinder.define('checked:single-checkbox-input-checked', {
    selector: '[name="single-checkbox-input-checked"]'
});
<input type="checkbox" name="multiple-checkbox-input-checked" value="A">
<input type="checkbox" name="multiple-checkbox-input-checked" value="B">
modelBinder.define('checked:multiple-checkbox-input-checked', {
    selector: '[name="multiple-checkbox-input-checked"]'
});
<input type="radio" name="radio-input-checked" value="A">
<input type="radio" name="radio-input-checked" value="B">
modelBinder.define('checked:radio-input-checked', {
    selector: '[name="radio-input-checked"]'
});
<button type="button" name="button-visible">Visible</button>
modelBinder.define('visible:button-visible', {
    selector: '[name="button-visible"]'
});
<button type="button" name="button-hidden">Hidden</button>
modelBinder.define('hidden:button-hidden', {
    selector: '[name="button-hidden"]'
});
<button type="button" name="button-enabled">Enabled</button>
modelBinder.define('enabled:button-enabled', {
    selector: '[name="button-enabled"]'
});
<button type="button" name="button-disabled">Disabled</button>
modelBinder.define('disabled:button-disabled', {
    selector: '[name="button-disabled"]'
});
  • Fixed visible, hidden, enabled, disabled bindings
  • Plugin implemented as decorator, not a class
  • Readers and writers merged into types
  • Added new binding types hidden, enabled, disabled
  • A lot of fixes
  • Readers and writers runs in context this
  • Added binding type visible
  • Method reset renamed to syncToCollection
  • Changed signature of method binding
  • Added public method reset for refreshing a list manually
  • Added views allocation inside the root element
  • Methods sort and reset are private
  • ViewCollection is sortable
  • Method reset is public
  • Removed binding type data
  • Items removes via collection's listener and not model's
  • Added binding type data
  • Properties readers and writers are static
  • Removed CommonJS support
  • Databinding moved to Backbone.ViewModel class
  • Added Backbone.ViewCollection class
  • Added CommonJS support
  • Methods delegateBindings and undelegateBindings are public
  • Method addBinding renamed to binding
  • Initial release