AFrameJS is a Javascript MVC application development library, not a DOM manipulation library! AFrameJS leaves the DOM manipulation to jQuery, MooTools, or Prototype, instead providing the parts necessary to create MVC applications.
Web development is maturing, MVC based applications are becoming increasingly common. AFrameJS is being developed to fill the need of having a true MVC framework to develop applications with. Backbone and Knockout-JS are two similar libraries that address this need, now AFrameJS does too.
AFrameJS is DOM library agnostic, meaning it can be used with any DOM library. All DOM manipulation within the library is done using DOM adapters, currently there are adapters for jQuery, MooTools and Prototype. Adapters for YUI, Ext, and possibly Dojo are planned as I get time. If there is an adapter that you need that is not written, code it up, make sure it passes the unit tests, and I will gladly accept submissions!
Presented below is a simple MVC application that combines many of AFrameJS' concepts. Models are created and contained in a Collection and then a List of Views presents the data contained in the models. AFrameJS's special object construct mechanism is used, allowing the developer to use object Plugins.
A working version of this demo can be found at the AFrameJS site
// The "main" Controller.
// Define the "layout" of model using a SchemaConfig.
var friendSchemaConfig = {
name: { type: 'text' }
};
// Use a collection to keep track of the friend models. When data items are
// inserted into collection, models will be created automatically using the
// layout defined in the friendSchemaConfig
var friendsCollection = AFrame.CollectionArray.create( {
// Whenever data is inserted into the collection, create a model for the
// data using the layout defined in friendSchemaConfig.
plugins: [ [ AFrame.CollectionPluginModel, {
schema: friendSchemaConfig
} ] ]
} );
// This is a list of friends. It will display the data held by each of Friend models.
// The list is bound to the friendsCollection, any time a friend is added or removed
// from the collection, the list will be automatically updated.
var friendsList = AFrame.List.create( {
target: '#friendList',
listElementFactory: function( model, index ) {
// whenever a model is inserted into the collection, create a list item
// using the data from the model.
return AFrame.DOM.createElement( 'li', model.get( 'name' ) );
},
// Bind the list to the collection, causing the list to update automatically
// whenever friends are added or removed from the collection.
plugins: [ [ AFrame.ListPluginBindToCollection, {
collection: friendsCollection
}
] ]
} );
// Once the user enters a name, insert the new "friend" data into the friendsCollection.
// A friend Model will be created, and the list will be updated - all automatically.
$( '#add-friend' ).click( function( event ) {
var friend_name = prompt( "Who is your friend?" );
friendsCollection.insert( { name: friend_name } );
} );Grab a pre-compiled version of the library:
Create a script tag inside of your HTML document:
<script type="text/javascript" src="https://github.com/shane-tomlinson/AFrame-JS/raw/master/aframe-current-xxx.js"></script>where xxx is the version that you downloaded.
AFrameJS is released under the Creative Commons Attribution 3.0 License.
AFrameJS is still in heavy development and has a long way to go to be a polished product. Any suggestions, any feedback, and any contributions will be taken seriously.
I am especially in need at the moment of more people using AFrameJS to create simple apps that help point out where pain points, difficulties and down right strangenesses are. A clean API makes life so much easier, with help, I'd like to make AFrameJS the cleanest Javascript MVC library that exists.
A second area that could use attention is in documentation. I have tried my best to document as I have gone along, but some more detailed documentation as well as some simple HOWTOs are needed.
A third area that needs help is to write DOM adapters for various DOM libraries. Adapters are needed for YUI, Dojo, Ext, and any other DOM libraries out there that are used.