MVCClass

This is an extended class of MVCObject.

What does 'mvcclass = mvcobject + events' mean?

@Treri creates MVCObject, this is great, and I appreciate for his work.

But he does not implement the "addEventListener" method. And I wanted to use similar methods, such as "on()", "once()", "emit()", and so on, so I decided to extend the MVCObject class.

Mechanism

You can use set(key, value) and get(key) methods basically. Set a new value with set(key) method, you can catch the event named (key)_changed.

var mvcclass = require('mvcclass');

var myClass = new mvcclass();

myClass.on('value1_changed', function(key) {
  console.log('The value1 is changed: ' + this.get('value1'));
});

myClass.set('value1', 'test');

Because of inheriting EventEmitter2 module, you can also use as event emitter.

myClass.on('myEvent', function(data) {
  console.log('myEvent: ' + data);
});

myClass.emit('myEvent', 'hi!');

Example1 : Catch the events when values are changed.

var mvcclass = require('mvcclass');

var myClass = new mvcclass({
  'value1': 'Hello World',
  'value2': 3
});

var onValueChanged = function(key) {
  console.log('--> eventName: ' + this.event + ', newValue: ' + this.get(key));
};

myClass.on('value1_changed', onValueChanged);
myClass.on('value2_changed', onValueChanged);

myClass.set('value1', 'Welcome!');
myClass.set('value2', myClass.get('value2') + 15);

// Outputs
//
// --> eventName: value1_changed, newValue: Welcome!
// --> eventName: value2_changed, newValue: 18

Example2: Catch all events with wildcard

var myClass = new mvcclass({
  'wildcard': true,   // wildcard, delimiter,
  'delimiter': '_',
  'value1': 'Hello World',
  'value2': 3
});

var onValueChanged = function(key) {
  console.log('--> eventName: ' + this.event + ', newValue: ' + this.get(key));
};

myClass.on('*_changed', onValueChanged);

myClass.set('value1', 'Welcome!');
myClass.set('value2', myClass.get('value2') + 15);


// Outputs
//
// --> eventName: value1_changed, newValue: Welcome!
// --> eventName: value2_changed, newValue: 18

Example3: Set multiple values at once.

setValues(object) method allows you to set JSON Object as key-value pairs.

var onValueChanged = function(key) {
  console.log('--> eventName: ' + this.event + ', newValue: ' + this.get(key));
};

myClass.on('*_changed', onValueChanged);

myClass.setValues({
  'value1': 'Welcome!',
  'value2': myClass.get('value2') + 15
});

// Outputs
//
// --> eventName: value1_changed, newValue: Welcome!
// --> eventName: value2_changed, newValue: 18

Example4: Bind a property to another object.

bindTo() method sets the value that stored into the class to another object.

var myClass = new mvcclass({
  'enable': true
});

// anotherObject.enable = myClass.enable
var anotherObject = new mvcclass();
myClass.bindTo('enable', anotherObject);

anotherObject.on('enable_changed', function(key) {
  console.log('--> (anotherObject) enable = ' + this.get(key));
});

myClass.set('enable', false);

// Outputs
//
// --> (anotherObject) enable = false

Methods

See MVCObject and EventEmitter2.

Change logs

version 0.1.2 Use EventEmitter2 instead of events internally.

You can get the event name with this.event in event listeners.

wf9a5m75/MVCClass