PX2 - a Backbone style framework

PX2 is an MV*, Backbone-like framework with a more consistent design:

• objects are also containers, of type Model or View

• named getters and setters, including loud getters

• containers can be specialized so they only contain a specific type of object and also contain members

• Views derived from Model, so they can have members and getter/setters and be containers

• objects that 'contain' other objects (by using 'set', 'add', 'push' or 'insertAt' methods) are passed messages from the objects they contain, just like Backbone collections but more general.

• iterators (start,end,next,prev,current), standard mapping functions (map, each, forIn) and sorting.

If you don't like the fact you can't have collections of collections or that views and collections can't have settable members in Backbone, then PX2 is for you.

Installation

npm install --save px2
bower install --save px2

Dependencies

jQuery if you use Views, none otherwise.

Examples

 See the examples/ folder.

Model methods

 this.create(name, value, silent):

   Creates a new member variable called 'name' with initial value
   of 'value'. Also creates named getters/setters, this.name() and
   this.name(value). Sends 'create' and 'create:$name' messages
   with value as event.value unless silent is true.

 this.copy():

   Returns a deep copy of this.

 this.set(name, value, silent)

   Standard setter for Model objects. Sends "change" and
   "change:$name" events when called, unless silent is true.  The
   value of this.name() is the new value and the event.value
   (passed as the first part of 'change' trigger handler) is the
   old value that this.name() was set to.

 this.get(name, loud)

   Standard getter for Model objects, sends 'get' and 'get:$name'
   messages. Will send 'get' and 'get:$name' messages if 'loud' is
   true, with the event value being the previous value of
   this.name(). This message is sent before the value is returned
   allowing the opportuntity to change the value that is going to
   be returned to the calling function.  This allows for the
   creation of named variables that return a different value
   everytime they are called:

      // Create a random variable
      obj.create('random');
      obj.on('get:random', function (e) {
          return this.random(Math.random());
      });
      var a = obj.get('random', true);
      expect(obj.get('random', true)).to.not.equal(a);

 this.add(value, silent)

   Add value to the collection if it is not already in the
   collection and sends "add" with event.target being the value
   added and "modified" with event.target being an array with the
   value added, unless silent is true.
   
 this.insertAt(i, value, silent)

   Add value to the collection at index i. Sends "add" with
   event.target being the value added and "modified" with
   event.target being an array with the value added, unless silent
   is true.
   
 this.push(value, silent)

   Add value to the head of the collection. Sends "add" with
   event.target being the value added and "modified" with
   event.target being an array with the value added, unless silent
   is true. Much faster than add, since it doesn't have to scan
   the entire storage looking for a duplicate.
   
 this.swap(i, j, silent)

   Exhanges two values in the collection. Sends "modified" with
   event.target being an array with the values swapped, unless
   silent is true.
   
 this.remove(value, silent)

   Remove value from the collection if it has been added to it
   using add/push/insertAt. Sends "add" with event.target being
   the value added and "modified" with event.target being an array
   with the value added, unless silent is true. Returns true if
   the object was removed, false otherwise.

 this.at(index)

   Return an element in the collection located at index.  Throws
   Error if index is out of range.
   
 this.indexOf(obj)

   Return the integer index of obj in storage (for use with at), or
   undefined if the object is not in the collection.
   
 this.length:

   The number of elements contained in the object storage.

 this.clear(silent)

   Remove all items from the collection and sets length to 0;
   sends "modified" message with all items from storage before
   clearing, unles silent is true.

 this.on(message, function (event) { ... }, self)

   Intercept message with handler, setting this to self during
   call of handler.  If 'self' is omitted, 'this' is used.
   'event' contains event.value, which is the value passed to
   trigger, and event.target which will be the object that
   triggered the message, in most cases 'this'.

   If the event handler returns true, messages will continue to
   propagate up the containment chain, else it will stop at the
   handling object.

 this.once(message, function (event) { ... }, self)

   Like this.on, but the handler is only called once, after which
   it is removed from the handler action table.

 this.trigger(message, value)

   Send the message to this, and then all containing parents,
   recursively up the containment tree.  Propagation stops when
   the message is intercepted and handled, unless the handler
   returns true (and only true, not truthy).

 this.each(function (value) { ... }, self)

   Side effects only iteration over elements. 'self' defaults to
   'this' if not provided.

 this.map(function (value) {...}, self)

   Returns an array of returned values from function. 'self'
   defaults to 'this' if not provided.

 this.forIn(function (key, value) { ... }, self)

   Side effects only mapping over members (created with
   this.create()); 'self' defaults to 'this' if not provided.

 this.find(object || function (value) ...)

   Find a specific object in the collection.  If the argument is
   an object, === is used, if a function it is called with each
   element of the collection until it returns true. Returns the
   object, if it is found.

 this.sort(fun, silent)

    Destructively sorts the internal storage array using fun,
    returns 'this' so you can chain with map. Sends "modified"
    event with the sorted array, unless silent is true.

Iterators

  All iterators send "change" and "change:current" messages unless
  silent is true, with the event.value being the previous value of
  this.current().

  Note: the pattern for iterators is slightly different than other
  languages:

      for(var i = this.start(); i; i = this.next()) { ... }

  or in reverse:
  
      for(var i = this.end(); i; i = this.prev()) { ... }

  this.start(silent)

    Select the first element of storage as current.

  this.end(silent)

    Select the last element of storage as current.

  this.current(objOrNumber, silent)

    Return the current element with no aruments.  With obj as an
    argument, select that object as the current object.  With a
    number, select the object at that index in storage as current.

 this.next(loop, silent)

    Return the next element and set it as current, or undefined if
    at the end of storage.  If loop is true, loop around to the
    start and return the first element.
    
 this.prev(loop, silent)

    Return the previous element and set it as current, or
    undefined if at the start of storage.  If loop is true, loop
    around to the end and return the last element.

Events

  An event is passed to a trigger handler.  An event includes the
  value and target fields; value is the value passed to
  set/add/push/etc, and target is the object that initiated the
  event.

Serialization

   Serialization is working but some parts are experiemntal, so
   don't expect it to work perfectly yet with all/complex
   Models/Views.  Try it at first with simple objects that have
   only members and storage and not complex actions (trigger that
   set setf to something other than this) See test/serialize.js
   for more info on what works and what doesn't..

   this.serialize()

      Return an object containing all members, storage and actions
      that can be possibly passed to JSON.stringify() for storage.

   this.load(object, load-actions)

      Load 'object' into this.  'Object' should be something that
      was returned from this.serialize(), probably after being
      JSONified and back. If load actions is false, actions are
      not loaded into this, hopefully keeping them from getting
      trashed during the load (needs more testing and
      experimentation).

Example of defining and using a Model as an object and a container

var Model = require("px2").Model;

// Declare object class data
var Point = Model({
    // Optional, but good for debugging and containers
    type: 'Point'

    // optional, create members and set default values 
    defaults: {
        system: "cartesian"
    },

    // Constructor, called during instatiation
    init: function (x, y) {
        this.create('x', x);
        this.create('y', y);
    }

    // A random method
    toString: function () {
        return "x: " + this.x() + ", y: " + this.y() + " " + this.system();
    }
})

// Delcare a container
var Points = Model({
    type: 'Points',

    // This container contatins type...
    contains: 'Point'

    init: function () {
        this.create('currentPoint'); // undefined initially

        this.on('add', function (e) {
            // Use a named setter to set the current value of member 'currentPoint'.
            // e is passed to all trigger functions and it contains:
            //          e.value: the value that was added/removed/updated/etc
            //          e.target: the object that was updated, in this case it would be 'this'
            this.currentPoint(e.value);
        });
        this.on('remove', function (e) {
            if(e.value === this.currentPoint()) {
                this.currenPoint(undefined);
            }
        });
    }
});

// Instantiate a Points collection
var points = new Points();

points.add(new Point(100, 200));

var point = points.at(0);

var xs = points.map(function (point) {
    return point.x();
}); // => [100]

Views

Views are derived Model and contain all features and methods that Models give.

View example

var PointsView = View({
    // optional, but handy for debugging and is the default class if
    // className is not defined (below)
    type: 'PointsView',

    // Set the name of the variable used to reference the model,
    // in this case this.points rather than this.model
    model "points"

    // optional, sets default tag name of this.$el, else is "div"
    tagName: "span",  

    // optional, sets default class of this.$el. If not provided
    // the class name is set the the value of type (above). If the
    // string starts with a space, the provided class name(s) will be
    // appended to the value of type. ie: a value of className: " window"
    // will result in a final class name of "PointsView window"
    // in this case.
    className: " window",

    // optional, name for this.model. In this case, you could use
    // this.points to reference your model. The model is not
    // enclosed in the object, so messages from the model are
    // not propagated into this View.
    model: 'points',

    // optional css initial style, using jquery syntax
    style: {
           "font-weight": "bold"
    }

    // events, just like backbone
    events: {
        'click': function (e) {
                 alert(this.message()); // 'this' is bound for you automagically
        }
    }

    init: function (model, value) {
          this.create('value', value);
          this.create('message', "Hello World!");

          // eithefq this.model or this.points can be used, due to
          // the 'model' option used above
          this.points.on('add', this.render); // 'this' is bound automagically

          // this.render() is automatically called at the end of init for Views.
    }

    // render, which if you don't provide a default is given that
    // just returns this.$el
    render: {
            return this.$el.html(this.points.map(function (v) {
                return $('<div>').text(v.toString());
            }));
    }
})

var points = new Points();

// A View constructor is similar to a Model constructor, but the
// first argument is *always* the model for the view.
var pointsView = new PointsView(points, 1);
$('document').ready(function () {
    $('body').html(pointsView.$el);
});

WTF is this written in?

PX2 is written in Parenscript: https://github.com/vsedach/Parenscript

To build from source you need sigil: https://github.com/burtonsamograd/sigil

--

Burton Samograd [email protected]

Twitter: @kruhft

2015