6.events.md

Events

< Constants | Main | Namespaces >

Sources: components/meta/Events.js

As well as properties and methods there are two types of events: clazz events and instance events. To add event listeners for these two types of events next two meta directives are using:

• clazz_events - for clazz events
• events - for instance events

These two meta directives have exactly the same structure. They contain hash (simple object) which keys are event names and values are hashes of event listeners. Each event listner has listener name and listener logic (function). At this time there are next built-in events:

Clazz events:

• *instance.create - creation of new clazz instances. Listener: function(instance) { ... };

Instance events:

• property.get - getting value for any property Listener: function(propertyName, value);
• property.{propertyName}.get - getting value for concrete property Listener: function(value);
• property.has - 'has' check for any property Listener: function(propertyName, hasResult);
• property.{propertyName}.has - 'has' check for concrete property Listener: function(hasResult);
• property.is - 'is' check for any property Listener: function(propertyName, isResult);
• property.{propertyName}.is - 'is' check for concrete property Listener: function(isResult);
• property.set - setting value for any property Listener: function(propertyName, newValue, oldValue) { ... };
• property.{propertyName}.set - setting value for concrete property. Listener: function(newValue, oldValue) { ... };
• property.remove - removing value for any property. Listener: function(propertyName, oldValue) { ... };
• property.{propertyName}.remove - removing value for concrete property Listener: function(oldValue) { ... };
• property.clear - clearing value for any property Listener: function(propertyName, oldValue, newValue) { ... };
• property.{propertyName}.clear - clearing value for concrete property Listener: function(oldValue, newValue) { ... }

You can attach/detach cevent listeners to/from created clazz or clazz instances. Use on/off methods for this purposed. Their signatures:

• on: function(eventName, listenerName, listener)
• off: function(eventName, listenerName)

You can emit your own event using emit method. Its signature:

• emit: function(eventName, param1, param2, ...)

Example:

Online working version of this example is available on plunker: http://plnkr.co/edit/Q1iYkw

clazz('Person', {
    properties: {
        name:     ['string'],
        birthday: ['datetime'],
        sex:      ['string'],
        address:  ['string', 'unknown address']
    },
    clazz_methods: {
        cryToAll: function(crying) {
            document.write('Crying to all: "' + crying + '"!');
            this.emit('crying', crying);
        }
    },
    methods: {
        say: function(saying) {
            document.write(
                this.getName() + ': "' + saying + '"!<br>'
            );
            this.emit('saying', saying);
        }
    },
    clazz_events: {
        'crying': {
            thatCrying: function(crying) {
                document.write(
                    'That crying: "' + crying + '"!<br>'
                );
            }
        },
        "instance.created": {
            newObjectCreated: function(object) {
                document.write(
                    'Person "'+object.getUID()+'" '+
                        'with name "'+object.getName()+'" '+
                        'was created!<br>'
                );
            }
        }
    },
    events: {
        "property.set": {
            birthdayChanged: function(property, newValue, oldValue) {
                if ('birthday' === property) {
                    document.write(
                        'Person "' + this.getUID() + '" ' +
                            'change his birthday form "' + oldValue + '" ' +
                            'to "' + newValue + '"!<br>'
                    )
                }
            },
            addressChanged: function(property, newValue, oldValue) {
                if ('address' === property) {
                    document.write(
                        'Person "' + this.getUID() + '" ' +
                        'change his address from " ' + oldValue + '" '+
                        'to "' + newValue + '"!<br>'
                    )
                }
            },
        },
        "property.address.remove": {
            addressRemoved: function(oldAddress) {
                document.write(
                    'Person "' + this.getUID() + '" ' +
                        'just remove his address "' + oldAddress + '"!<br>'
                )
            }
        },
        'saying': {
            justSaying: function(saying) {
                document.write('Person "' + this.getUID() + '" said: "' + saying + '"!<br>');
            }
        }
    }
});

var Person = clazz('Person');

var john = Person.create({
    name: 'John',
    birthday: '1977-05-12'
});

john.setAddress('Moscow, Lomonosova st., 16');
john.removeAddress();

john.on("property.name.set", 'nameChanged', function(newName, oldName) {
    document.write(
        'Person "'+this.getUID()+'" '+
            'just change his name from "'+oldName+'" '+
            'to "' + newName +'"!<br>'
    )
});
john.setName('Gerry');

john.off('property.set', 'birthdayChanged');
john.setBirthday('1970-06-08');


Person.cryToAll('Here we are!');
john.say('Hey there! I am here!!!');

< Constants | Main | Namespaces >