$ ember new leipzigjs
// Setup environments + config
// App structure
// NPM install
// Bower install
$ ember s
// Watch
// Livereload
// Compile
// Jshint
$ ember s --proxy http://localhost:3000
// All the above
// Proxy api calls
$ ember t
$ ember t -s
$ ember t -m "IndexController"
$ ember build -prod
// ES6 transpile
// Sass, Less, Stylus, CoffeeScript etc.
// Uglify
// Minify
// Concat
// Fingerprinting of asssets + CDN URLs
// Sourcemaps (disabled in prod by default, enabled in dev)
$ ember install:addon addon-name
$ ember g [controller|route|component|acceptance-test|http-mock|...]
$ ember addon
// Unit test
moduleFor('controller:index', 'IndexController');
test('#add', function() {
var controller = this.subject();
equal(controller.add(2, 3), 5, 'should add the two given numbers');
});
// Acceptance test
var App;
module('Acceptance: Index page', {
setup: function() {
App = startApp();
},
teardown: function() {
Ember.run(App, 'destroy');
}
});
test('displays form after click on toggle button', function() {
expect(2);
visit('/');
andThen(function() {
equal(find('form').length, 0, 'no form shown');
click('.show-form');
equal(find('form').length, 1, 'form is shown');
});
});
Ember.copy()
Ember.isEmpty()
Ember.isBlank()
Ember.isPresent()
Ember.isNone()
Ember.isArray()
Ember.makeArray()
Ember.keys()
Ember.merge()
Ember.tryInvoke()
Ember.typeOf()
Ember.inspect()
Ember.run()
Array polyfills for map, forEach, filter, etc.
Array.contains()
Array.uniq()
Array.without()
Array.compact()
Array.invoke()
Array.addObject() / Array.removeObject()
String.fmt()
String.camelize()
String.loc()
String.underscore()
String.w()
RSVP.Promise()
RSVP.hash()
RSVP.all()
Ember.Mixin
Ember.CoreObject.extend()
App = Ember.Application.create();
App.Router.map(function() {
});
App.IndexController = Ember.Controller.extend({
actions: {
login: function(data) {
console.log(data);
alert('Logging in...');
}
}
});
App.MyLoginComponent = Ember.Component.extend({
actions: {
login: function() {
this.sendAction('action', this.getProperties('username', 'password'));
}
}
})
<script type="text/x-handlebars">
<h1>Login</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
{{my-login action='login'}}
</script>
<script type="text/x-handlebars" id="components/my-login">
{{input value=username placeholder='Username'}}
{{input value=password placeholder='Password'}}
<button {{action 'login'}}>Login</button>
</script>
<script type="text/x-handlebars">
<h1>Login</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
{{my-menu}}
</script>
<script type="text/x-handlebars" id="components/my-login">
{{input value=username placeholder='Username'}}
{{input value=password placeholder='Password'}}
<button {{action 'login'}}>Login</button>
</script>
<script type="text/x-handlebars" id="components/my-menu">
<h1>Menu</h1>
{{my-login action='login'}}
</script>
App = Ember.Application.create();
App.Router.map(function() {
this.route('other');
});
App.IndexController = Ember.Controller.extend({
actions: {
toggleForm: function() {
this.toggleProperty('showForm');
}
}
});
<script type="text/x-handlebars">
<h1>Login</h1>
<h2>{{link-to 'Homepage' 'index'}}</h2>
<h2>{{link-to 'Other page' 'other'}}</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
{{#if showForm}}
{{my-login}}
{{else}}
<a {{action 'toggleForm'}}>Show form</a>
{{/if}}
</script>
<script type="text/x-handlebars" id="other">
<h3>Other</h3>
</script>
<script type="text/x-handlebars" id="components/my-login">
{{input value=username placeholder='Username'}}
{{input value=password placeholder='Password'}}
<button {{action 'login'}}>Login</button>
</script>