[windows only] > ember-cli-windows
>ember new [project-name]
>ember install ember-bootstrap
>ember install ember-cli-sass
change name of app.css file to app.scss
>ember install emberfire
create .json file and import to firebase project to seed database
configure firebase in config/environment.js ->
`var ENV = {
...
...
firebase: {
apiKey: 'xyz',
authDomain: 'YOUR-FIREBASE-APP.firebaseapp.com',
databaseURL: 'https://YOUR-FIREBASE-APP.firebaseapp.com',
storageBucket: 'YOUR-FIREBASE-APP.appspot.com',
},
}`
>ember g[enerate] model [model-name]
fill in model details matching .json and firebase properties exactly ->
`export default DS.Model.extend({
propertyOne: DS.attr(),
propertyTwo: DS.attr(),
propertyThree: DS.attr()
});`
relationships are established in models ->
models/rental.js ->
`export default DS.Model.extend({
DS.hasMany('review', { async: true })
});`
models/review.js ->
`export default DS.Model.extend({
rental: DS.belongsTo('rental', { async: true })
});`
return multiple models with an rsvp hash ->
`model() {
return Ember.RSVP.hash({
rentals: this.store.findAll('rental'),
reviews: this.store.findAll('review')
});
},`
>ember g route index
index must be generated manually but does not require and entry in router.js
>ember g route [route-name]
_dynamic route configure in router.js ->_
`this.route('route', {path: '/route/:route_param'});`
>ember g component [component-name]
>ember g template application
use application template as an overall layout for your site with header/footer/nav etc.
application.hbs should contain at least an {{outlet}} tag, where other templates will be displayed
>ember s[erve]
Additional Notes:
-
When using
this.get('input_field')
to gather form input, helper MUST have value attribute, and written without quotes ->{{input value=fieldName}}
-
Never trust
this
-
Actions should be initiated from components.
-
Variables to hide or show components should be stored within the component themselves.