@openmind/zero
v0.1.7
Published
The Openmind Zero framework project
Downloads
703
Keywords
Readme
Project Zero
Contribute
Make sure you're using nvm as node environment. Otherwise check it on nvm
Make sure you have installed brew. Otherwise check it on Homebrew
git clone ssh://[email protected]:7999/oc/zero.git
cd zero
nvm use
npm install -g npm
brew install yarn --without-node
yarn global add gulp-cli yo
yarn install
gulpWork with Zero
Creating component
In your project go to 'javascripts' folder and create components folder.
Create a new file as follow:
my_new_compoent.jsCopy this code in order to quickly start using it
import {Logger, Zero, Components, Utils} from 'Zero'
const Log = new Logger('MyComponentName');
export default class MyComponentName extends Components {
get Messages() {
return {
"Message:To:Handle": this.onMessageReceived
}
}
constructor(element) {
super(element)
}
onMessageReceived() {
// TODO: do something awesome
}
}
(new) Zero can work with previous Boilerplate
Import Zero via bower or via npm (recommended)
Make sure you are importing latest available version (see tags)
// bower.json
"dependencies": {
"om-zero": "ssh://[email protected]:7999/oc/zero.git#{version}"
}
// npm via package.json
"dependencies": {
"@openmind/zero": "#{version}"
}Import zero-bridge.umd.js located into build/ folder.
NOTE: make sure the script is imported after app.js and before App.init().
<html>
<head>
...
</head>
<body>
...
<script src="path/to/{libs}.js"></script>
<script src="path/to/app.js"></script>
<script src="path/to/zero-bridge.umd.js"></script>
<script>
App.init()
</script>
</body>
</html>Now you can start writing Components in Zero and they can work with all other components within boilerplate
// new_component_file.js
// Header of file as usual in boilerplate
(function($, App, Components, Pages, Utils) {
//-- See Zero documentation if any doubts --
App.ZeroComponent('MyNewComponent', {
Messages: function(){
return {
'mynewcomponent:something': this.somethingHappened.bind(this)
};
},
init: function(element) {
this.element.find(".selector").on("click", function(e){
e.preventDefault();
//-- Fire Message event in order to be captured from any other component
App.Zero.Broadcast.cast("mynewcomponent:something-else", {code: "001"});
});
},
somethingHappened: function(e, msg) {
//-- Message from other component has been captured
alert("Oh wow, something happened!" + msg.code === "002" );
this.element.addClass("happened");
}
});
})(jQuery, App, App.Components, App.Pages, App.Utils);
// already_existing_component.js
(function($, App, Components, Pages, Utils) {
Components.create('MyOlderComponent', {
bindEvents: function() {
Components.on("mynewcomponent:something-else", function(e, msg) {
alert("A new component say:" + msg.code);
});
$(".older-selector").on("click", function(e) {
e.preventDefault();
// Send message to all other components
Components.trigger("mynewcomponent:something", {code: "002"});
})
},
init: function() {
this.bindEvents();
}
});
})(jQuery, App, App.Components, App.Pages, App.Utils);