❤
npm
Sign UpSign In

bobun

0.4.1 • Public • Published

Bobun Build Status

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

Installing

Client side

bower install bobun

Server side

npm install bobun

Bobun.View

append ( view )

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

mainView.append(subView);

domEventTriggerProxy ( event )

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

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

set, get, validate

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

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

bind, bindTo

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

Bobun.View.extend({
  initialize: function () {
    // 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

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).

bind( obj, bindedObj, attributes )

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');
...

bindTo( obj, bindedObj, attributes )

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');
...

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i bobun

Weekly Downloads

2

Version

0.4.1

License

MIT

Last publish

Collaborators

  • neoziro
Try on RunKit
Report malware