FlightJS inspired components system for NodeBB

core.js

define('notifications', ['events', 'components'], function(events, components) {

	var notifications = {};


	notifications.init = function() {
		events.initialize('notifications', function() {
			this.register('icon.unread', markUnread);
			this.register('icon.read', markRead);
		});
	};

	notifications.update = function(count) {
		if (count > 0) {
			events.fire('notifications:icon.unread');
		} else {
			events.fire('notifications:icon.read');
		}
	}


	// DOM manipulation should only happen here and nowhere else to "decouple" DOM from logic
	function markUnread() {
		components.get('notifIcon')
			.removeClass('fa-bell-o').addClass('fa-bell');
	}

	function markRead() {
		components.get('notifIcon')
			.removeClass('fa-bell').addClass('fa-bell-o');
	}

	return notifications;
});

plugin.js

define('my/plugin/or/theme', ['events', 'components'], function(events, components) {

	var plugin = {};

	plugin.init = function() {
		events.extend('notifications', function() {
			this.after('icon.read', afterMarkRead);
			this.before('icon.read', beforeMarkRead);	

			this.override('icon.unread', myBetterVersion);
		});
	};


	function afterMarkRead() {
		alert('notif was marked read!');
	}

	function beforeMarkRead() {
		alert('notif is about to be marked read!');
	}

	function myBetterVersion() {
		components.get('notifIcon')
			.removeClass('fa-custom-font').addClass('fa-custom-font');
	}

});