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

Step 2. Set Up Routes and Model

Now, let us configure the routes for our application. There are many ways to set up the routes, but we will use:

  • /products to show the list of products
  • /products/new to show a form to add a new product
  • /products/:product_id to show the details of a specific product
  • /products/:product_id/edit to show a form to edit a specific product

To do that, append the following code to app.js:

App.Router.map(function() {
  this.resource('products', function() {
    this.route('new');
    this.route('show', {path: '/:product_id'});
    this.route('edit', {path: '/:product_id/edit'});
  });
});

We also need to set up the Product model with four attributes: name, author, description and price. We will also add the htmlID attribute which will be useful for identifying specific HTML elements when we test the application later.

We will extend the model with Ember.Validations.Mixin from ember-validations. This mixin allows us to specify the validation rules for this model—name and price are both required attributes, and price is a non-negative number. The mixin also provides methods for validating form input for when we build the Edit and New forms later.

Let us also define four fixtures for the Product model. Instead of assigning the fixtures directly (e.g. App.Product.FIXTURES = [...]), we will wrap this assignment in a new method App.resetFixtures() which we call immediately to initialize the fixtures. When we write our tests, this method will come in handy for resetting the fixtures to the default state before each test is run.

Append to app.js:

App.Product = DS.Model.extend(Ember.Validations.Mixin, {
  name: DS.attr('string'),
  author: DS.attr('string'),
  description: DS.attr('string'),
  price: DS.attr('number'),

  // To identify html tag for a Product.
  htmlID: function() {
    return 'product' + this.get('id');
  }.property('id'),

  validations: {
    name: {
      presence: true
    },
    price: {
      presence: true,
      numericality: {
        greaterThanOrEqualTo: 0
      }
    }
  }
});

App.resetFixtures = function() {
  App.Product.FIXTURES = [
    {
      id: 1,
      name: 'Ember.js in Action',
      author: 'Joachim Haagen Skeie',
      description: 'Ember.js in Action is a crisp tutorial that introduces the Ember.js framework and shows you how to build production-quality web applications.',
      price: 44.99
    },
    {
      id: 2,
      name: 'Building Web Applications with Ember.js',
      author: 'Jesse Cravens & Thomas Brady',
      description: 'This guide provides example-driven instructions on how to develop applications using Ember, one of the most popular JavaScript frameworks available.',
      price: 29.99
    },
    {
      id: 3,
      name: 'The Ember.js Way',
      author: 'Brian Cardarella & Alex Navasardyan',
      description: "Inspired by Addison-Wesley's classic The Rails Way series, The Ember.js Way crystallizes all that's been learned about Ember.js development into a start-to-finish approach that works.",
      price: 39.99
    },
    {
      id: 4,
      name: 'Instant Ember.JS Application Development: How-to',
      author: 'Marc Bodmer',
      description: 'A practical guide that provides you with clear step-by-step examples. The in-depth examples take into account the key concepts and give you a solid foundation to expand your knowledge and your skills.',
      price: 20.69
    }
  ];
};

App.resetFixtures();

Now that our router and model is set up, we are ready to create some routes, controllers and templates to display some information.

You can get the code for this step by running:

git checkout step-2
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