Getting started (CommonJs aero). To use with Browserify.
Install aero.js via npm
npm install aero.js
Require aero.js and then you can create an aero view
var aero = require('aero.js');
var React = require('react');
var mainView = aero.view.extend ({
init: function () {
this.render();
},
render: function () {
var View = React.createClass({
render: function() {
return (
<main>
<h1>Main view with React</h1>
</main>
);
}
});
React.render(<View />, document.getElementById('content'));
}
});
module.exports = mainView;
In your main app file, register the view in aero controller
var aero = require('aero.js');
var mainView = require('./views/mainView');
var views = [
{
name: 'main',
ref: mainView
}
];
aero.controller.init(views);
Finally, show the view to the browser
aero.controller.showView('main');
Check the full Browserify-React-Aero sample in the github repository.
Getting started (Global aero)
Include aero.js and its dependencies (zepto.js and lodash.js) to your index.html file
<script src="path/to/zepto.js"></script>
<script src="path/to/lodash.js"></script>
<script src="path/to/aero.js"></script>
You can run
bower install aero.js
to retrieve these files
Then you can create an aero view
window.app = window.app || {};
window.app.views = window.app.views || {};
window.app.views.main = window.aero.view.extend ({
template: 'templates/main.html',
container: '#content',
init: function () {
this.addEvent('click button.hiBtn', this.hiBtnHandler);
// Array injection
var array = [{name: 'item list 1'}, {name: 'item list 2'}, {name: 'item list 3'}];
this.renderArray('main ul', 'templates/mainList.html', array, function (element) {
element.name = 'Aero ' + element.name;
});
// Object injection
var author = {firstname: 'Thibaud', lastname: 'Bourgeois'};
this.render('footer', 'templates/mainFooter.html', author);
},
hiBtnHandler: function () {
window.alert('Hi');
}
});
The template will be later injected into the container element
Register the view in aero controller
var views = [
{
name: 'main',
ref: window.app.views.main
}
];
window.aero.controller.init(views).preload();
Once initialized you can indicate to the controller to preload templates
Finally, show the view to the browser
window.aero.controller.showView('main');
You can pass a second parameter (a json object) to the showView function. Then use the
<%=key%>
notation to use passed data in your associated template
Check the full sample in github repository
Data binding extension
Input binding
In your template add the data-observable-input
attribute to the input you want to observe
<input type="text" name="userName" data-observable-input>
Then in your aero view, you can get and set the input value through this variable
this.observables.userName.value
Value binding
First create an object with the value you want to observe (here name
)
this.observables.user = {name: 'everyone'};
Then in your template, add to your html element the data-observable-value
attribute which value should be "user.name"
<span data-observable-value="user.name"></span>
Finally, you can get and set the name property of user object through this variable
this.observables.user.name
Array binding
Create an array in your aero view
this.observables.others = [
{
name: 'Lebron'
},
{
name: 'Kobe'
}
]
Then add the data-observable-array
attribute to your element which value should be the name of your array variable (here others
), you can specify the template you want to use for every array iteration thanks to the data-observable-template
attribute
<ul data-observable-array="others"
data-observable-template="templates/user.html"></ul>
All the data you want to observe should be register in the
observables
object of the related aero view.