bobun

Backbone UI oriented library.

Bobun

Bobun is a UI oriented Backbone library. It supports one-way and two-way bindings and sub-views.

bower install bobun
npm install bobun

Add a view to sub-views, render it, append it to $el and call delegateEvents.

mainView.append(subView);

Provides a way to bind a dom event to a view event.

Bobun.View.extend({
  events: {
    'click': 'domEventTriggerProxy'
  }
});

Similary to models with attributes, Bobun.View exposes options using set, get and validate.

var List = Bobun.View.extend({
  options: {
    'processing': false
  },
 
  initializefunction () {
    this.on('change:processing', this.render);
  }
 
  renderfunction () {
    this.$el.empty();
 
    if (this.get('processing'))
      this.$el.append('<i class="icon-spinner icon-spin">');
  }
});
 
var list = new List();
list.set('processing', true);
});

Thanks to Bobun.Binding, it's possible to bind a view to a model or an other view.

Bobun.View.extend({
  initializefunction () {
    // bind processing attribute to processing option 
    this.bind(this.model, 'processing');
 
    // bind processing option to disabled button option 
    this.bind(this.button, {'processing': 'disabled'});
  }
});

It's possible to bind a model option using a shortcut.

Bobun.View.extend({
  options: {
    'disabled': 'model.readonly' // bind disabled option to readonly model attribute 
  }
});
Bobun.Binding(modelA).bind(modelB, 'foo');
 
modelA.set('foo', 'bar');
 
modelB.get('foo') // -> return 'bar' 

All methods can be called directly or wrapped (as underscore).

Provides a two-way binding.

// simple 
Bobun.Binding.bind(modelA, modelB, 'symetricAttribute');
Bobun.Binding.bind(modelA, modelB, ['fistSymetricAttribute', 'secondSymetricAttribute']);
Bobun.Binding.bind(modelA, modelB, {'modelAAttribute': 'modelBAttribute'});
 
// wrapped 
Bobun.Binding(modelA).bind(modelB, 'symetricAttribute');
...

Provides a one-way binding.

// simple 
Bobun.Binding.bindTo(modelA, modelB, 'symetricAttribute');
Bobun.Binding.bindTo(modelA, modelB, ['fistSymetricAttribute', 'secondSymetricAttribute']);
Bobun.Binding.bindTo(modelA, modelB, {'modelAAttribute': 'modelBAttribute'});
 
// wrapped 
Bobun.Binding(modelA).bindTo(modelB, 'symetricAttribute');
...

MIT