Shane Tomlinson

This is an update to Object Instantiation in AFrameJS – Now Simplified, which is an update to AFrameJS Tutorial – A Response to “Backbone.js Tutorial – by noob for noobs”. Object instantiation has gotten even simpler – again. Every “class” that is created using AFrame.Class or AFrame.extend and that has an init function will have a “create” function attached as a static class member. The attached create function will call AFrame.create with the class constructor. The advantage is less but more readable code.

The Old Way

// Instantiating a plain AFrame.AObject.
var instance = AFrame.create( AFrame.AObject );

The New Way

// A few less bytes, but way more readable.
var instance = AFrame.AObject.create();

Options can be passed along to the create function, as shown in the next example.

Fuller Example

A working example can be found at JSFiddle

// HTML used
<button id="submitButton">Submit Button</button>

=====

    // Create a button class listening for a click
var Button = AFrame.Class(AFrame.Display, {
    domevents: {
        click: function(event) {
            alert('button clicked');
        }
    }
});

var button = Button.create({
    target: '#submitButton'
});

The final example from Object Instantiation in AFrameJS – Now Simplified is shown here, updated for this change:

Reworking the “Add Friend” Example

A working example can be found on JSFiddle.

$( function() {

    // Instead of creating a model, create a SchemaConfig.
    // A Model in AFrame is an instance of data combined
    // with a Schema.  The schema config will be used when
    // creating the model.
    var friendSchemaConfig = {
        name: { type: 'text' }
    };

    // Our friends collection is an array.  Instead of binding
    // directly to an event on the collection, when creating
    // the list, we bind the list to the collection.
    // The ListPluginBindToCollection will take care of
    // updating of the list.
    var friendsCollection = AFrame.CollectionArray.create( {
        plugins: [ [ AFrame.CollectionPluginModel, {
             schema: friendSchemaConfig
        } ] ]
    } );

    // This is the friends list.  It is bound to the
    // friendsCollection, so any time a model is added or
    //  removed from the friends collection, the list will update.
    var friendsList = AFrame.List.create( {
        target: '#friendList',
        listElementFactory: function( model, index ) {
            return AFrame.DOM.createElement( 'li',
                model.get( 'name' ) );
        },
        plugins: [ [ AFrame.ListPluginBindToCollection, {
             collection: friendsCollection
        } ] ]
    } );

    // we insert into the friendsCollection once we
    // have a name.  The list will be updated automatically.
    $( '#add-friend' ).click( function( event ) {
           var friend_name = prompt("Who is your friend?");
           // A new model will be created when adding
           // to the friend collection.
           friendsCollection.insert( { name: friend_name } );
    } );
} );

Read Object Instantiation in AFrameJS – Now Simplified to see more examples of the various ways to create an object.