CODEWITHSUNDEEP
ember.js
D Z
D Z

Reputation: 73

How to make an array of objects global in ember JS

I have just started learning ember JS, so this question might sound silly. I'm trying to design a blog like website using ember v 1.12.0. Right now, I'm using static data for the posts. They look like this:

var posts=[{
      id:1,
      author:{name:"Clark Kent",age:32},
      identity: "Superman",
      Description: "Alien",
      date: new Date('1-1-15'),
      body: 'Stands for hope'
    },
    {
      id:2,
      author:{name: "Bruce Wayne",age:31},
      identity:"Batman",
      Description: "Billionaire",
      date: new Date('1-1-16'),
      body: 'Stands for fear'
    }];

I would like to make this global so that it can be accessed from multiple containers and also that the data persists when I edit the details dynamically. I know this may not even be good practice. But, right now, I'm just trying to build this page. So your help would be appreciated. Thank you.

Upvotes: 0

Views: 93

Answers (2)

Phil Hauser
Phil Hauser

Reputation: 564

Ideally you would use Ember-data for this, as thats exactly the job it is designed to do. You just need a simple model defined for your data. Take a look at the guides for ember models.

If you are using Ember-CLI (which is recommended), ember data is included and you just need to use the command line to create a new model and add the array as a fixture.

ember g model posts

Your ember-cli model would then look like:

let Posts = DS.Model.extend({
      authorName: DS.attr('string'),
      authorAge: DS.attr('string'),
      identity: DS.attr('string'),
      Description: DS.attr('string'),
      body: DS.attr('string'),
      date:  DS.attr('date')
});

Posts.reopenClass({
  FIXTURES: [{
      id:1,
      authorName: "Clark Kent",
      authorAge: 32,
      identity: "Superman",
      Description: "Alien",
      date: new Date('1-1-15'),
      body: 'Stands for hope'
    },
    {
      id:2,
      authorName: "Bruce Wayne",
      authorAge: age:31,
      identity:"Batman",
      Description: "Billionaire",
      date: new Date('1-1-16'),
      body: 'Stands for fear'
    }];
});

export default Documenter

This model can then be loaded wherever you like with:

this.store.find('posts', 1);

Otherwise you will need to get the ember-data lib from github or bower and just create a simple model:

App.ApplicationAdapter = DS.FixtureAdapter;

App.Documenter = DS.Model.extend({
      authorName: DS.attr('string'),
      authorAge: DS.attr('string'),
      identity: DS.attr('string'),
      Description: DS.attr('string'),
      body: DS.attr('string'),
      date:  DS.attr('date')
});

App.Documenter.reopenClass({
  FIXTURES: [{
      id:1,
      authorName: "Clark Kent",
      authorAge: 32,
      identity: "Superman",
      Description: "Alien",
      date: new Date('1-1-15'),
      body: 'Stands for hope'
    },
    {
      id:2,
      authorName: "Bruce Wayne",
      authorAge: age:31,
      identity:"Batman",
      Description: "Billionaire",
      date: new Date('1-1-16'),
      body: 'Stands for fear'
    }];
});

Again with this approach you can call:

this.store.find('posts', 1);

to get your data back from the store.

This is usually used in the model hook of your route:

App.PostsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('posts', 1); 
  }
});

As an aside, I would recommend looking at some ember-cli tutorials.

Finally, if you really don't want to do it the ember way, or learn the ember way right now, you could always just chuck the JSON into localStorage. However if you plan on using Ember, I would really invest the time to USE ember, ember-data integrates really nicely with ember and comes with a host of advantages.

Upvotes: 1

Patsy Issa
Patsy Issa

Reputation: 11293

If you are learning to use ember I would suggest you do it along side learning how to use the ember-cli.

That said, if you want to make that variable a global variable, depending on your files you could place it in a script tag in the index.html file, or any other file that is always included.

Upvotes: 0

Related Questions