Neatly Positioned Magazines
    Wondering what’s next for npm?Check out our public roadmap! »

    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

    Keywords

    none

    Install

    npm i bobun

    DownloadsWeekly Downloads

    2

    Version

    0.4.1

    License

    MIT

    Last publish

    Collaborators

    • avatar