This repository has been archived by the owner on Mar 30, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 196
Registering Ceci components imperatively
Bobby Richter edited this page Oct 16, 2013
·
1 revision
The following is an sample script which will register a Ceci component called app-test
. Here are a few things to note:
- For the time being,
template
,description
, andthumbnail
must be DOM elements (i.e. not strings) when they are sent toCeci.registerComponent
. - The
constructor
will be called in exactly the same way as a declarative component.this
, andCeci
should be no different. - There is a small "initialization" block at the top, which just checks if Ceci has been loaded yet. Once Ceci has composed itself, it will emit the
ceciready
event ondocument
, and is ready to use.
(function(){
// Check for Ceci, and wait for it to init if it's not there.
if (window.Ceci) {
init();
}
else {
document.addEventListener('ceciready', init);
}
function init () {
document.removeEventListener('ceciready', init);
// Gather/create the necessary elements of a Ceci component
var template = document.createElement('template');
template.innerHTML = '<div style="display: block; height: 50px;">Test</div>';
var thumbnail = document.createElement('thumbnail');
thumbnail.innerHTML = 'Test';
var description = document.createElement('description');
description.innerHTML = 'Test';
// Register the component with Ceci
Ceci.registerComponent('app-test', {
constructor: function () {
Ceci(this, {
init: function (params) {
var that = this;
this.onclick = function (e) {
that.broadcast('send', 'test');
};
},
broadcasts: ['send'],
listeners: {
receive: function (data, channel) {
this.broadcast('send', data);
}
},
defaultListener: 'receive',
defaultBroadcasts: ['send']
});
},
description: description,
thumbnail: thumbnail,
friends: ['app-test'],
template: template
});
}
})();