Models
In Ember.js, every route has an associated model. The {{link-to}} or transitionTo() methods takes an argument as model which implements the route's model hook. The model helps to improve application robustness and performance. Ember.js uses the
Ember Data which manipulates with the stored data in the server and also easy to work with streaming APIs like socket.io and Firebase or WebSockets.
Core Concepts
- Store
- Models
- Records
- Adapter
- Serializer
- Automatic Caching
Store
The store is central repository and cache of all records available in an application. The route and controllers can access the stored data of your application. The DS.Store is created automatically to share the data among the entire object.
Ember.Route.extend({
model: function() {
return this.store.find();
}
});
Models
A model is a class which defines the data of properties and behavior. When a user refreshes the page, the contents of page should be represented by a model.
DS.Model.extend({
birthday: DS.attr('date')
});
Records
A record is an instance of a model which contains information that is loaded from a server and it is uniquely identified by its model type and id.
this.store.find('model_type', id)
Adapter
An adapter is an object which is responsible for translating requested records into the appropriate calls to particular server backend.
Serializer
A serializer is responsible for translating JSON data into a record object.
Automatic Caching
The store cache records automatically and it return the same object instance when records fetched from the server for second time. This improves the performance of your application.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emberjs Models using Core Concepts</title>
<!-- CDN's-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="https://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<script type="text/x-handlebars" data-template-name="index">
<h2>Models using core concepts: </h2>
<p>{{#link-to 'posts'}}Click for books Detail{{/link-to}}</p>
</script>
<script type="text/x-handlebars" data-template-name="posts">
<h2>Books Name and Author: </h2>
{{#each post in controller}}
<p><b>{{post.book}}</b></p>
<p><i>{{post.author}}<i></p>
{{/each}}
</script>
<script type="text/javascript">
App = Ember.Application.create();
//The store cache of all records available in an application
App.Store = DS.Store.extend({
//adapter translating requested records into the appropriate calls
adapter: 'DS.FixtureAdapter'
});
App.ApplicationAdapter = DS.FixtureAdapter.extend(//extending Adapter);
App.Router.map(function() {
//posts route
this.resource('posts');
});
App.PostsRoute = Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
App.Post = DS.Model.extend({
//data Model
//setting book and author attr as string
book: DS.attr('string'),
author: DS.attr('string')
});
//attach fixtures(sample data) to the model's class
App.Post.FIXTURES = [{
id: 1,
book: 'Java',
author: 'Balaguruswamy'},{
id: 2,
book: 'C++',
author: 'Herbert Schildt'},{
id: 3,
book: 'jQuery',
author: 'Ryan Benedetti'
}];
</script>
</body>
</html>
Output
Let's carry out the following steps to see how above code works:
- Save above code in models.htm file
- Open this HTML file in a browser.
Let us see some more details about models by clicking the below links:
No comments:
Post a Comment