How To: CRUD with Validation in Ember.js Using ember-easyForm, ember-validations, and Boostrap

One of the basic building blocks of any web application is CRUD, or Create, Read, Update and Delete. It allows users and administrators to manage the data in the application. Full-stack server-side MVC frameworks like Django or Ruby on Rails provide code generators that give you all the code needed for a basic CRUD interface. But what if you were using Ember.js to build your application? Ember.js does not provide any code generators, and there is no established idiom or best practices for CRUD in Ember.js. In this series I will show how to build a basic CRUD interface in Ember.js, complete with user input validation.

In this example, we will build a CRUD interface for products in an online book store.

The tools that we will use are:

  • Ember.js, our framework
  • Ember Data, the official model library for Ember.js
  • ember-easyForm, a set of helpers to easily build forms in Ember.js
  • ember-validations, a declarative system for defining data validations in Ember.js
  • Bootstrap, a CSS framework to make our application look pretty
  • QUnit, to test our application

Step 1. Set Up

Before we get started, we need to set up Ember.js and our dependencies. We do that by creating index.html and inserting <link> and <script> tags to pull in the dependencies:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ember.js CRUD Example</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- QUnit -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/qunit/1.14.0/qunit.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <div id="qunit-tests"></div>

    <script type="text/x-handlebars">
      <div id="application" class="container-fluid">
        <div class="row">
          <div id="left-nav" class="col-md-3" style="background-color: #eeeeee">
            <ul class="nav nav-pills nav-stacked sidebar">
              {{#link-to "index" tagName="li"}}{{#link-to "index"}}Dashboard{{/link-to}}{{/link-to}}
            </ul>
          </div>
          <div id="main" class="col-md-9">
            {{outlet}}
          </div>
        </div>
      </div>
    </script>

    <script type="text/x-handlebars" data-template-name="index">
      <div class="jumbotron">
        <h1>Welcome!</h1>
        <p>This app demonstrates CRUD with validation in Ember.js</p>
      </div>
    </script>

    <!-- jQuery -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Handlebars -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
    <!-- Ember.js -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.5.1/ember.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.8/ember-data.min.js"></script>
    <!-- ember-easyForm -->
    <script src="http://builds.dockyard.com.s3.amazonaws.com/ember-easyForm/canary/shas/add6a40a68c8b081557a9011cf99ea255414e1b1/ember-easyForm.min.js"></script>
    <!-- ember-validations -->
    <script src="http://builds.dockyard.com.s3.amazonaws.com/ember-validations/canary/shas/2ff28c6ba4d227b0f863b327cdff23c381c37afb/ember-validations.min.js"></script>
    <!-- Bootstrap -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <!-- QUnit -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/qunit/1.14.0/qunit.min.js"></script>


    <!-- JavaScript files for our application and tests -->
    <script src="app.js"></script>
    <script src="tests.js"></script>
  </body>
</html>

Let us also create app.js:

window.App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend({
  namespace: 'ember-crud'
});

And tests.js:

App.rootElement = '#qunit-tests';
App.setupForTesting();
App.injectTestHelpers();

module('Integration: Index', {
  setup: function() {
    App.reset();
  }
});

test('app test', function() {
  expect(1);

  visit('/').then(function() {
    equal(find('h1').text(), 'Welcome!');
  });
});

Now if you load index.html in your browser, you should see the welcome message. Ensure that the tests have passed.

You can get the code for this step by running:

git clone https://gist.github.com/c793c1383fb17e3f4410.git
git checkout step-1
Advertisements

5 thoughts on “How To: CRUD with Validation in Ember.js Using ember-easyForm, ember-validations, and Boostrap

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s