Design models in EmberJS

Question

I have stuck with architectural problem in EmberJS. I already have backend and I need to implement frontend part. So, I have "builder" route:

import Ember from 'ember';

export default Ember.Route.extend({
    model() {
        return this.store.createRecord('builder');
    }
});

Builder model:

import DS from 'ember-data';

export default DS.Model.extend({
    cocktailsTypes: DS.attr(), //must be array
    cocktailsOptions: DS.attr(), //must be array
    selectedIngredients: DS.attr(), //must be array
    ingredients: Ember.computed({
        get() {
            return this.store.findAll('ingredient');
        }
    })
});

"Ingredient" model:

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  vol: DS.attr('number'),
  description: DS.attr('string'),
  category: DS.attr('string')
});

And I want to add some action in "builder" route to create custom request and send data from "builder" model.

Will it work? Is it right way in EmberJS and ember data? Maybe I need to use some alternatives of ember data or change model's design?

My goal is build working app in "ember way" as best as possible.

P.S. I'm using the last version of EmberJS.

EDIT:

The use case, in general, next: I have builder route and template. On this page user may choose some options, types and ingredients (from list of all ingredients presented in model.ingredients). After that user clicks "submit" and selected options/types/ingredients will be put in "search" request.

Why don't you try will it work instead of asking? We have 0 knowledge about your backend. — Daniel Kmak
I'm newbie in Ember and don't know much about typical solutions. And I don't want to "invent" my own bicycle if there normal way exists. My backend - RESTful API. But besides resources (like ingredients) it has "seacrh" end-point with parameters. — Crabar

Billybonks Billybonks · Accepted Answer · 2015-07-31T10:56:14

Assuming the response from your backend is correct.

To define a hasMany relation ship in Ember.Data.Model use DS.hasMany. The way you have set it up with a computed property will result in the following behaviour:

Every builder will have every ingredient you have defined in your application.
It will be an Immutable property.

i would change your models like this:

-Builder model

import DS from 'ember-data';

export default DS.Model.extend({
    cocktailsTypes: DS.attr(), //must be array
    cocktailsOptions: DS.attr(), //must be array
    selectedIngredients: DS.attr(), //must be array
    ingredients: DS.hasMany('ingredient')
});

-Ingredient model

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  vol: DS.attr('number'),
  description: DS.attr('string'),
  category: DS.attr('string')
});

Design models in EmberJS

1 Answers