Home » Jquery » ember.js and the server

ember.js and the server

Posted by: admin November 30, 2017 Leave a comment

Questions:

I’m looking at Ember.js and have been reading the docs to try and understand how to use it. I get it (pretty well), except for one thing. To my way of thinking in the MVC pattern, the Model is the repository for data in the application. I can see how that works for client side data in Ember.js. What I don’t get is how to tie that data back to the server so that if data changes at the client, the changes are updated in server. And vice versa. I’ve been doing this by in in my web applications making Ajax/JSON calls to back and forth to the server, I’m just not getting how to do that using Ember.js.

Answers:

Digging just a bit around emberjs on GitHub I have found this: https://github.com/emberjs/data:

Ember Data is a library for loading models from a persistence layer
(such as a JSON API), updating those models, then saving the changes.
It provides many of the facilities you’d find in server-side ORMs like
ActiveRecord, but is designed specifically for the unique environment
of JavaScript in the browser.

I’d also suggest reading Ember.js Live Collections. What you want is to have a collection of models that will know how to sync with server side, possible example code is:

// our model
App.Person = Ember.Object.extend();

App.people = Ember.ArrayController.create({
  content: [],
  save: function () {
    // assuming you are using jQuery, but could be other AJAX/DOM framework
    $.post({
      url: "/people",
      data: JSON.stringify( this.toArray() ),
      success: function ( data ) {
        // your data should already be rendered with latest changes
        // however, you might want to change status from something to "saved" etc.
      }
    });
  }
});

You’d then call App.people.save() at needed occasions.

Also be sure to check out this article, Advice on & Instruction in the Use Of Ember.js, that goes deeper into server-client communication with Ember and also mentions emberjs/data.

Note: Emberjs Data Library should be used with caution for the fact that it is not production ready.

Questions:
Answers:

In Ember.js, the “model” contained in the Ember object will contain a further abstraction of an underlying server side database, if you’re using one. The controller portion of the application then should have methods which allow you to retrieve and send data which are called when needed in order to update the model (using Ajax). This is nice because you have a model which can respond quickly on the client side to any input a user provides the application (keystrokes, mouse movements, whatever) and selectively choose when to make relatively costly queries to a server side database, for example. This way some of the performance of the app is no longer hindered by the latency of data requests to an an external server, which in some cases can allow you to create applications whose responsiveness approaches that of native apps.

Questions:
Answers:

I like to picture Ember.js in pairs like this

  • Views and Templates are correlated (obviously), tweak the Views-Class to control the Template (like the classNames)
  • Router and Routes work a bit like the controller in MVC. They are responsible for routing the request to the correct endpoint
  • Controller and Model are model centric, one (the Model) describes the data you will handle in your application while the controller behaves like a kind of proxy (or decorator, if that’s more up your alley). Templates will hook up to the controller for example and

Basically that means you load up your controller (single or array) with a model and can now easily model the processes working on that model (i.e. the stuff that does not touch the model in its core/data) in your controller. For an example blog application you would describe the Post in the model and add something like that for the controller

App.PostController = Ember.ObjectController.extend({
  content: null,

  // initial value
  isExpanded: false,

  expand: function() {
    this.set('isExpanded', true)
  },

  contract: function() {
    this.set('isExpanded', false)
  }
});

Now you can interact with the represenation of the model in terms of frontend thinking through the controller. Expanding a post or not does not change the model, only changing the data does.

In terms of reloading data from the server, I have two answers for you

  1. I found this article quite helpful in understanding the connections (and simple polling, albeit simple)
  2. If you’re using Rails, you will get lucky with upcoming Rails 4 Live, see this post and demo for the juicy parts
Questions:
Answers:

I realize this is a bit old of a question, but it’s on the highest-rated page for ember.js, so I figured I’d add a bit.

I’ve been using ember-model lately to handle RESTful data binding. It has fewer bells and whistles, but for my needs it’s pretty decent. Basically, it just extends the model functionality to integrate reasonably well with a server pushing JSON objects through a standard REST interface.

Leave a Reply

Your email address will not be published. Required fields are marked *