EmberJS without using Ember Data

Question

I have been wanting to implement a method for correctly dealing with data transfer without the use of Ember Data.

I currently have a Java Backend which can correctly handle the 'getting' & 'posting' data.

Here is my structure. Let's say we work with a part of the system which deals with handling configuration.

Here is my model:

App.ConfigurationRoute = Ember.Route.extend({
      model: function(params) {
           return App.Store.configuration('getConfig');
       }
});

Here is my controller (Notice I have an action of configSubmit which is where the data is passed to from the view):

App.ConfigurationController = Ember.ObjectController.extend({
// initial value
    isExpanded: false,
    actions: {
        configSubmit: function() {

            var data = {
                formsDir: this.get('formsDir'),
                processDir: this.get('processDir')
            } 

            App.Store.configuration('saveConfig', data);
        }
    }
});

Here is my View Code (Notice this posts to my configSubmit action in my controller above:

<script type="text/x-handlebars" id="configuration">
  <div class="process-body">
     <div class="processitem form-reader">
        <form>
           <div class="processitem forms-directory">
              <label class="name">Forms Directory:</label>
              {{input id="forms-directory" class="form-control configuration-item" type="text" value=formsDir}}
           </div>
           <div class="processitem process-directory">
              <label class="name">Process Directory:</label>
                 {{input id="process-directory" class="form-control configuration-item" type="text" value=processDir}}
           </div>
        </form>
     </div>
     <button type="submit" class="btn btn-submit btn-default" {{action 'configSubmit'}}>Submit</button>
    </div>

After this I Create a new Ember object under the name of App.store, and then re-open it where necessary. Below is an example:

App.Store = Ember.Object.extend();

    App.Store.reopenClass({
       configuration: function( action, data ) {
          if (action === 'getConfig') {
           return $.getJSON("myurlforgettingdata").then(function(data) { 
            if (data.config) {
                return data.config; 
            } else {
                return [];
            }
        });
    }
           if (action === 'saveConfig') {
            $.ajax({type: 'POST', url: 'myurltopost', dataType: 'json',
            data: {
                formsDir: data.formsDir,
                processDir: data.processDir,
            },
            success: function(jsonData) {

            },
            error: function() {

            }
        });
    }

My question here is to see whether this is a flexible strategy not only with restful backend, but for unrestful backends too?

Notice I can pass the data and what action is to be carried out by the store.

Kingpin2k Kingpin2k · Accepted Answer · 2014-05-27T16:09:56

Short answer: yes

Long answer:

Ember Data is difficult and helpful all at the same time. As with any library, it gives you a slew of fun functionality, but at the same time you then are forced into using their api. Pros include, but not limited to: record caching, dirty record checking, rollback, relationships, async relationships, promise ready, etc. Cons are that it's still in beta, relationships are tricky, the responses are tricky. The main reason it's so tricky is the lack of documentation, due to it being beta.

Not using Ember Data is a perfectly fine approach for those who want to implement all of those niceties, or the niceties that they want.

I'd recommend you at least wrap your "records" as Ember.Objects that way you can use foo.get('property').

var foo = { 
      property: 'value'
};

foo.get('property'); // ERROR get isn't defined on foo
Ember.get(foo, 'property'); // yay w

orks. var foo = Ember.Object.create({ property: 'value' });

foo.get('property'); // yay, works

EmberJS without using Ember Data

1 Answers