Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where is fixture data in ember.js with cli

I'm trying to use fixture data in an ember app generated with cli. I can't find my data. The inspector shows I have a model called post but nothing in it. I'm not sure why it's not working so posting the files that I think are relevant...

models/post.js

var Post = DS.Model.extend({
    title: DS.attr('string'),
    content: DS.attr('string'),
    publishDate: DS.attr('date')
});

Post.reopenClass({
    FIXTURES: [
        {
            id: 1,
            title: "Writing a blog in Ember",
            content: "I am writting a blog",
            publishDate: "05/22/2104"
        },
        {
            id: 2,
            title: "Writing a blog in Ember",
            content: "I am writting a blog",
            publishDate: "05/22/2104"
        }
    ]
});

export default Post;

router.js

var Router = Ember.Router.extend({
  location: ENV.locationType
});

Router.map(function() {
    this.resource('posts', { path: '/' });
});

export default Router;

routes/index.js

export default Ember.Route.extend({
    model: function() {
        return this.store.find('post');
    }
});

controllers/posts.js

var PostsController = Ember.ArrayController.extend({

});

export default PostsController;

templates/posts.hbs

<p>Test</p>
<ul>
    {{#each}}
        <li>
            {{title}}
        </li>
    {{/each}}
</ul>

I think this problem is ember-cli specific. I have got fixtures working with Ember App Kit before but want to work with ember-cli. I added and adapter and tried changing the way fixtures were declared:

adapters/post.js

var PostAdapter = DS.FixtureAdapter.extend({});

export default PostAdapter;

Changed models/post.js

var Post = DS.Model.extend({
    title: DS.attr('string'),
    content: DS.attr('string'),
    publishDate: DS.attr('date')
});

Post.FIXTURES = [
        {
            id: 1,
            title: "Writing a blog in Ember",
            content: "I am writting a blog",
            publishDate: "05/22/2104"
        },
        {
            id: 2,
            title: "Writing a blog in Ember",
            content: "I am writting a blog",
            publishDate: "05/22/2104"
        }
    ];

export default Post;

This still doesn't work. Ember inspector shows posts with correct fields (id, title, content publishDate) but no actual data.

like image 548
brownie3003 Avatar asked May 23 '14 23:05

brownie3003


People also ask

What is Ember CLI?

Ember CLI, Ember's command line interface, provides a standard project structure, a set of development tools, and an addon system. This allows Ember developers to focus on building apps rather than building the support structures that make them run.

What is Ember CLI build js?

The Ember CLI (command line interface) is the official way to create, build, test, and serve the files that make up an Ember app or addon. Many things have to happen before a web app is ready for the browser. Ember CLI helps you get there with zero configuration.

Is Ember js client side?

Ember. js is a free JavaScript client-side framework used to design web apps, and it is open source.

Is Ember js a frontend?

Ember. js is a frontend web framework which claims on its website, to be the one tool you will need to build an ambitious web application.


2 Answers

I needed to add my fixture adapter in:

adapters/application.js

export default DS.FixtureAdapter.extend({});

And then it worked with the reopenClass version of fixtures:

models/post.js

var Post = DS.Model.extend({
    title: DS.attr('string'),
    content: DS.attr('string'),
    publishDate: DS.attr('date')
});

Post.reopenClass({
    FIXTURES: [
        {
            id: 1,
            title: "Writing a blog in Ember",
            content: "I am writting a blog",
            publishDate: "05/22/2104"
        },
        {
            id: 2,
            title: "Writing a blog in Ember",
            content: "I am writting a blog",
            publishDate: "05/22/2104"
        }
    ]
});

export default Post;
like image 74
brownie3003 Avatar answered Oct 11 '22 16:10

brownie3003


In addition to the above reopenClass method call, you also need to add to your Brocfile.js the import for EmberData

You can do it like so:

app.import({
  development: 'vendor/ember-data/ember-data.js',
  production:  'vendor/ember-data/ember-data.prod.js'
}, {
  'ember-data': [
    'default'
  ]
});

Thanks to this nicely put together post for helping me realise this: http://www.blakeerickson.com/posts/2014/06/17/ember_cli_todomvc_tutorial

like image 21
Peter O'Brien Avatar answered Oct 11 '22 15:10

Peter O'Brien