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.
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.
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.
Ember. js is a free JavaScript client-side framework used to design web apps, and it is open source.
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.
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;
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With