JavaScript MVC frameworks have become a popular choice for many frontend web developers today. Most of the time though, you will find that your application needs to communicate with some backend web service. Frequent calls to this service can slow down your development time. This can be frustrating, especially if you rely on a third party service which you have no control over.
To get around this issue Ember.js provides a useful feature called fixture adapters. Fixture adapters allow you to mock any possible calls to a server with locally stored dummy data. Once development is complete, you can swap out the fixtures, enabling your application to make calls to a server for real data. In this tutorial, we will be building a sample blog application that shows off Ember’s fixture adapters.
Introduction
Our blog application will have several screens. There will be a home page to list the posts, and another for viewing individual posts. Now that we know what we’re building, let’s get to it.
The index.html File
Create an index.html file in the root of your application and add the following code. This is a simple skeleton that includes Ember.js and its dependencies, Handlebars and jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Developing with Ember.js Using Fixture Adapters</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.7/ember-data.js"></script>
</head>
<body>
<h1>Welcome to our Ember.js blog</h1>
</body>
</html>Bootstrapping the Application
Create a new main.js file and paste the following code into it. This bootstraps a new instance of an Ember.js application and defines two routes for you.
App = Ember.Application.create();
App.Router.map(function() {
this.resource('articles', { path: 'articles' }, function() {
this.route('article', { path: '/:article_id' });
});
});List Articles on the Home Page
Next, we need to list our articles on the home page. To do that, complete the following steps.
Redirect to the Article Listing
To make sure that the articles appear on the home page, paste the following code inside your main.js file. This creates an index route and makes sure that anytime the home page is visited, the user is automatically redirected to the articles page.
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('articles');
}
});Create the Article Listing Route
Next, create the article listing route and provide some data for it. Paste this code inside the main.js file. The interesting part of this route is that we are returning a simple JavaScript array of articles as the model for the route.
var articles = [
{
id: 1,
title: 'Article 1',
body: 'This is my first article'
},
{
id: 2,
title: 'Article 2',
body: 'This is my secondarticle'
},
{
id: 3,
title: 'Article 3',
body: 'This is my third article'
}
];
App.ArticlesIndexRoute = Ember.Route.extend({
model: function() {
return articles;
}
});Create the Article Listing Template
Now that our route has a model, add the following template to the index.html file after the h1 header.
<script type="text/x-handlebars" id="articles/index">
<h2>Articles</h2>
{{#each}}
<p>{{#link-to 'articles.article' this}}{{title}}{{/link-to}}</p>
{{/each}}
</script>Visiting the homepage now shows a list of article links. When you click one of these links, you will be taken to a single article page. You will notice though, that the article details are missing. That’s because we have not added a template for a single article. Let’s do that next.
Show a Single Article
Add the following template to the index.html file after the articles/index template.
<script type="text/x-handlebars" id="articles/article">
<h2>{{title}}</h2>
<p>{{body}}</p>
</script>Now when we visit the home page and click on an article link, you should see a dedicated article page with the title and content for that article.
If you refresh the page, you will notice that the application is broken. The reason is because there aren’t any models supplied for that route when you access it through the URL.
There are two ways to fix this. We can either use fixture adapters or create an explicit route for a single article. Since we’ll be demonstrating the fixture adapters, we’ll show how to fix it using adapters.
Using Fixture Adapters
It is great that our application can list mock articles by returning an array as the route’s model. However, this approach can become unmanageable when our application grows. Swapping out the arrays for real data can become difficult when we are ready to use a backend server. That’s where fixture adapters come to the rescue. To make our application use the adapters, lets do a few things first.
Create an Article Model
Insert the following into you main.js file.
App.Article = DS.Model.extend({
title: DS.attr(),
body: DS.attr()
});Add the Fixtures
Next, add this code immediately after the previous code:
App.Article.FIXTURES = [
{
id: 1,
title: 'Article 1',
body: 'This is my first article'
},
{
id: 2,
title: 'Article 2',
body: 'This is my secondarticle'
},
{
id: 3,
title: 'Article 3',
body: 'This is my third article'
}
];Also, delete the articles array you created earlier on as we won’t be using it anymore.
Enable the Fixture
Next, add the following code to instruct Ember.js to use the fixture anytime we request an articles from the data store.
App.ArticleAdapter = DS.FixtureAdapter.extend();Query From the Fixture
Finally, we need to edit the article listing route. Change this code:
App.ArticlesIndexRoute = Ember.Route.extend({
model: function() {
return articles;
}
});To this:
App.ArticlesIndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('article');
}
});Now, when you visit the home page, you shouldn’t see any difference as we are using exactly the same data – the only difference is that it comes from a fixture now.
Conclusion
This brings us to the end of our brief tutorial highlighting the use of Ember.js fixture adapters. The blog application we developed shows only a little of what can be achieved with them. It becomes effortless to switch to a backend server when you decide to do so. In some cases, it is as easy as swapping out one line of code to make the transition.
In all my time developing Ember.js applications, I have yet to find an application whose development couldn’t have benefited from making use of adapters.
Besides this simple blog application, I encourage you to push the boundaries of fixture adapters’ capabilities by trying out the following.
- Implement the ability to add comments to articles.
- Create one-to-many and many-to-many relationships within the fixtures.
- Add the ability to create and edit articles.
I hope this article serves as a great starting point to using fixture adapters. To find out more, please visit the Ember documentation. You can also view a complete version of our blog application here.
If you have used fixture adapters before, please share your thoughts and experiences in using them.
Lamin SannehAn emberjs enthusiast, equally fascinated by laravel's clever but unorthodox use of fascades. Lamin Sanneh is a front end web developer who loves to dive into pretty much every thing web related. He teaches on youtube and you can also find him talking about web stuff here to anyone who would listen.
