emberjs - gpawade/gpawade.github.io GitHub Wiki
//defining class
Person = Ember.object.extend({
Say(){
//function
}
});
// creating instance with initializ
person = Person.create({
name : 'some value'
});
// Overriding Parent class method
Soldier = Person.extend({
Say(){
this._super(...arguments); // calling parent method
}
})
// Reopening class
Person.reopen({
isActive : true
})
//example
{
name : '',
list : [],
displayName : Ember.computed('name',function(){
return this.get("name") + " some text";
}),
// for list/array - if isDone property change of list array
remaining : Ember.computed('[email protected]', function(){
//proccess here
return [];
}),
//Below property change only if item added or removed from list
totalItem : Ember.computed('list.[]', function(){
//proccess here
return [];
}),
// computed property macro sample
remaining : Ember.computed.filterBy('list', 'isDone', false);
// one way binding
userName: Ember.computed.oneWay('user.fullName')
// alias
householdIncome: Ember.computed.alias('wife.householdIncome')
}
Observers reacts to changes in another property
//example
{
name : null,
nameChanged : Ember.observer('name', function(){
//deal with change
})
}
Observers in ember are currently synchronous. They will fire as soon as one of property changes. This synchronous behaviour can also lead to observers being fired multiple times.
To get around these problem, use Ember.run.once()
//example
{
nameChanged : Ember.observers('fistname', 'lastName', function(){
Ember.run.once(this, 'proccessFullName');
}),
proccessFullName : function(){
//deal with change
}
}
Observers never fire until after the initialization of an object is complete. Fire observers on initialization use init by using Ember.on()
//example
{
myaction : Ember.on('init', Ember.observer('name',funciton(){
//code
}))
}
Add observer outside of class defination
person.addObserver('name', function(){
//code
});
// router.js - map : url to route
Router.map(function() {
this.route('posts', { path: '/' }, function() {
this.route('new');
});
});
// route handler
// file: routes/user.js
export default Ember.Route.extend({
model(){
//
return [];
}
});
/*link to post*/
{{#link-to "posts"}}Link{{/link}}
/* list to new post */
{{#link-to "post.new"}}Link{{/link}}
/* with param */
{{#link-to "posts" data}}Link{{/link}}
export default Ember.Route.extend({
// model hook is used to load the model for route
model(params){
// params will used if dynamic segment in url
return this.store.query("person", { name : 'john'});
}
// by default - route handler will render template with same name as the route.
// if need to change the template name, then use below hook
renderTemplate(){
this.render('favouritePost');
}
})
Calling transitionTo() from a route or transitionToRoute() from a controller will stop any transition currently in progress and start a new one, functioning as a redirect. transitionTo() behaves exactly like the link-to helper.
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement() {
//
}
});
An Ember.Service is a long-lived Ember object that can be made available in different parts of your application.
Creation
//app/services/my-service.js
export default Ember.Service.extend({
});
Accessing
{
myService : Ember.inject.service("my-service")
}
ember-cli : ember generate model person
//app/models/user.js
export default DS.Model.extend({
firstName: DS.attr('string'),
lastName: DS.attr('string')
});
// app/model/order.js
export default DS.Model.extend({
lineItems: DS.hasMany('line-item')
});
// app/model/line-item.js
export default DS.Model.extend({
order: DS.belongsTo('order')
});
A record is an instance of a model that contains data loaded from a server.
this.store.findRecord('person', 1); // => GET /person/a
this.store.findAll('person'); // => GET /persons
this.store.peekRecord('person', 1); // => No network call
this.store.peekAll('person'); // => No network call
this.store.query('person', {name:'john'});
//Creating record
var user = this.store.createRecord('user', {
name : 'john'
});
user.save(); // this will send the data to server
findRecord & findAll will return the promise.
Store will automatically cached data if already loaded.
Attribute returned by the server does not match the type you would like to use in javascript, Ember Data allows you to define simple serialization and deserialization methods using transform.
Transform use in DS.attr() method as the first argument.
One to one
use DS.belongTo() method.
One to Many
use DS.hasMany() method.
An adapter is an object that translates requests from Ember into request to servers.
Customising Adapter-
// app/adapter/application.js
export default JSONAPIAdapter.extend({
host : "http://example.com",
headers: {
'API_KEY': 'secret key'
}
});
Ember Data - built-in adapters
- Adapter : basic adapter with no functionality
- JSONAPIAdapter : default adapter, follow JSONAPI conventions _ RESTAdapter : allow you to communicate with HTTP server by JSON.
In Ember Data, serializers format the data sent to and received from the backend store. By default, Ember Data serializes data using the JSON API format.
- JSONAPISerializer : default serializer, works with JSON API backends.
- JSONSerializer : simple serializer for working with single json object or arrays of records.
- RESTSerializer : a more complex serializer.
**Customizing serializers
// app/serializer/application.js
export default DS.JSONSerializer.extend({
});
Above application serializer use default. You can also define a serializer for a specific model.
More details - http://ember-cli.com/
// display list of command
$ ember
//new project
$ ember new app-name
// generate route
$ ember generate route <route-name>
// generate controller
$ ember g controller my-controller
// generate service
$ ember g service my-service
// generate model
$ ember g model model-name
// generate model with field
$ ember g model user name:string
// generate component
$ ember g component my-component
// handlebar template helper
$ ember g helper template-helper
// generate template
$ ember g template templatename
$ ember g util foo
// ember data
$ ember g transform foo
$ ember generate serializer application
- adapter
- component
- controller
- model
- route
- resource
- serializer
- template
- transform
- view
You can generate certain built-in blueprints with a pods structure by passing the --pod option.
$ ember g component my-component --pod
// => this will create the js & hbs file under `App/Components/my-component` folder.
Use below setting in .ember-cli config file, for pod structure as a default.
//.ember-cli
{
usePods : true
}