AFrame Now Supports jQuery, MooTools, and Prototype

AFrame has been refactored so that its previous jQuery dependency has been removed! All core DOM manipulation goes through a DOM adapter, with adapters being written for jQuery, MooTools and Prototype. This means that you can now use AFrame along side of your current favorite DOM manipulation library without adding any new dependencies.

If you are only using AFrame for its data modelling capabilities, then the next section will not be of much interest to you. For those using AFrame for its Display capabilities, the following are examples on how to use AFrame to create a display in each of jQuery, MooTools, and Prototype.

Creating a Display in jQuery

// create the firstNameTarget element and attach it.
var firstNameTarget = $( '<input id="firstNameInput" type="text" name="first_name" />' ).appendTo( $( 'form' ) );

// Method 1.  Passing the firstNameTarget directly.
var field = AFrame.construct( {
     type: AFrame.Field,
     config: {
         target: firstNameTarget
     }
} );

// Method 2.  Using a selector.
var field = AFrame.construct( {
     type: AFrame.Field,
     config: {
         target: '#firstNameInput'
     }
} );

Creating a Display in MooTools

This looks amazingly similar to the jQuery method - the only difference is in the creation of the input element.

// create the firstNameTarget element and attach it.
var firstNameTarget = new Element( 'input', {
    type: 'text',
    id: 'firstNameInput',
    name: 'first_name'
} );
$$( 'form' ).adopt( firstNameTarget );

// Method 1.  Passing the firstNameTarget directly.
var field = AFrame.construct( {
     type: AFrame.Field,
     config: {
         target: firstNameTarget
     }
} );

// Method 2.  Using a selector.
var field = AFrame.construct( {
     type: AFrame.Field,
     config: {
         target: '#firstNameInput'
     }
} );

Creating a Display in Prototype

This too, looks amazingly similar to the jQuery method and even more closer to the MooTools method.

// create the firstNameTarget element and attach it.
var firstNameTarget = new Element( 'input', {
    type: 'text',
    id: 'firstNameInput',
    name: 'first_name'
} );
$$( 'form' )[ 0 ].insert( firstNameTarget );

// Method 1.  Passing the firstNameTarget directly.
var field = AFrame.construct( {
     type: AFrame.Field,
     config: {
         target: firstNameTarget
     }
} );

// Method 2.  Using a selector.
var field = AFrame.construct( {
     type: AFrame.Field,
     config: {
         target: '#firstNameInput'
     }
} );

They all look pretty much the same. That's a good thing since it means that AFrame can work with your DOM library's native element objects. You do not have to change anything about the way you write your DOM code, you do not have to do any sort of translation, AFrame is ready to take your library's DOM objects as is. You can use your DOM library to do your DOM manipulations, but still use AFrame to do the jobs it was meant to do - manage MVC logic.

Check it out!