Don't know where to start with porting existing application to Ember


#1

Long story short:

  • I am using Ember-cli.
  • I want to use a simple array in place of Ember Data.
  • I want to have a constructor that creates new objects and a function that pushes the new objects to the aforementioned array.

Where does the array go? Where does Ember.Object.extend({}) go? Where does Ember.Object.create({}) go? How to I essentially substitute Ember Data with my array?

Full picture:

I have a pure client-side webapp in Angular where the core of my data is an array of objects. Each object has its own socket instance and when new data is received, it is pushed to the respective object’s array property. Here is roughly what my “model” looks like:

var allNetworks = [
  {
    network: "freenode",
    messages: [],
    socket: {
      ondata: function (event) {
        this.messages.push(event.data);
      }
    }
  },
  {
    network: "Mozilla",
    messages: [],
    socket: {
      ondata: function (event) {
        this.messages.push(event.data);
      }
    }
  }
];

The user navigates to http://localhost:4200/#/freenode and my resolver/router retrieves the “freenode” object and passes it to my controller. Now my template only needs an ng-repeat="message in messages"/{{each messages as |message|}} in order to display the data.

It was easy to make this in Angular because there really isn’t any abstraction. The user fills out a form and the data is passed to a constructor, which creates the new object and adds it to the allNetworks array. I have studied Ember for a few weeks but I don’t even know how to accomplish the simplest tasks.

So far, it seems like I will want to use Ember.Object in order to create my “constructor.” I don’t think that I want to use Ember Data because my models have dynamic properties, such as the messages array - the socket object is constantly pushing new messages to the messages array in the background. The pushPayload method makes sense if you have a single socket instance handling multiple records, but it doesn’t make sense for my application where each record has its own socket instance.

Assuming I’m on the right track, I have no idea how to organize my files. Obviously I need a template. I also know that I need a route where the model hook somehow iterates over allNetworks and finds the object where network equals "freenode". This object is then passed to my controller so that I can display the data in the template. But where does Ember.Object.extend({}); go? Where does Ember.Object.create({})? go? Where do I put my allNetworks array? How do I pass my allNetworks array to the model hook so that it can iterate over this array and extract my desired network object?