Is there a basic tutorial or guide on using Ember fixtures? I have gone through the tilde training but it drops right in the middle of a project and I am trying to start from Ember new following the same conventions taught in the course.
I have set up the following routes and fixture:
// routes/application.js
import Ember from 'ember';
import speakers from 'models/speaker-fixtures';
export default Ember.Route.extend({
model: function() {
return speakers;
});
// fixture app/models/speaker-fixtures.js
export default [{
id: "1",
twitterHandle: "foogirl",
name: "foo girl",
avatar: ""
}, {
id: "2",
twitterHandle: "fooboy",
name: "foo boy",
avatar: ""
}];
// adapter/application.js
import DS from 'ember-data';
export default DS.FixtureAdapter.extend({});
// serializer/application.js
import DS from "ember-data";
export default DS.RESTSerializer.extend({});
<.code>
error received :
File: project-voice/routes/application.js
ENOENT, no such file or directory '/Users/../tmp/tree_merger-tmp_dest_dir-VUc8t50a.tmp/models/speaker-fixtures.js'
Is there something I am missing that will help ember find my fixture file? This is my first attempt in creating an app outside a tutorial and I am a bit lost. *I also tried setting up the fixture in the model how it explains in the embercli doc and could not get that work.
Any push in the right direction would help tremendously. Thanks
The path indeed needs to be relative.
import '../models/speaker-fixtures';
Related
I am very surprised not to get DS models upon generating ember-cli model
ember -v
ember-cli: 2.4.3
node: 5.10.1
os: darwin x64
ember g model rental
Then I get :
// app/models/rentals
import Model from 'ember-data/model';
export default Model.extend({
});
according to the ember guide , I should get :
// app/models/rentals
import DS from 'ember-data';
export default DS.Model.extend({
});
what could be wrong ? thanks for feedback
There is nothing wrong with the generated code :)
Ember Data has been made an addon, and part of that work was to tweak the public ES6 modules so everything doesn't hang off of the DS object. Now you can directly import the Model like in the first code sample you show.
I have opened an issue on the Guides repository to fix the Tutorial section of the guides.
The new generated code should look like the following,
import Model from 'ember-data/model';
import attr from 'ember-data/attr' ;
export default Model.extend({
title: attr('string'),
owner: attr('string')
});
I am using ember cli with ember data and have been piecing together information but it still doesn't work. This all involves the Home model, route and template. I feel like I'm close but still no cigar. I took everything out except for the title to simplify it. According to documentation I've read, everything is as it should be.
here is my app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
Here is my home model:
import DS from 'ember-data';
export default DS.Model.extend({
title : DS.attr('string'),
});
Home.reopenClass({
FIXTURES :[
{
id: 1,
title: 'Sponge B',
},
{
id: 2,
title: 'John David',
},
]
});
Here is my home route:
import Ember from 'ember';
//import DS from 'ember-data';
export default Ember.Route.extend({
model: function(){
return this.store.find('Home');
},
});
This is my home template:
<div id="home">
{{#each}}
<p>{{title}}</p>
{{/each}}
</div>
{{outlet}}
Could someone please help me out?
I think it has something to do with my model hook.
Could this also be a controller issue. I generated a basic controller. Should I have generated an arrayController?. The home route when saved gives me this error message:
models/home.js: line 9, col 1, 'Home' is not defined. but when I define it there still is a problem. Am I supposed to ad a folder called adapters, then put a file in it called application.js, then ad export default DS.FixtureAdapter.extend(); . But when I do that it tells me DS is not defined
It looks like you are explicitly exporting your model as Home and then you are trying to find('home') which does not have the same letter case.
Ember will not automatically resolve the case for you. If you want to use Home as the model, you will need to call it in the same way every time.
You might even need to import Home from '../models/model-file'; if you want to call it from the route..
An easier thing to try would be to use the implicit export default Ember.Model.extend({}) and let ember-cli resolve the class using your file name.
http://www.ember-cli.com/#using-modules
Your template seems to be the issue. You reference an item property that isn't there:
<div id="home">
{{#each}}
<p>{{title}}</p>
{{/each}}
</div>
Also, you have some syntax problems with your model. Try this:
import DS from 'ember-data';
var Home= DS.Model.extend({
title : DS.attr('string'),
});
Home.reopenClass({
FIXTURES :[
{
id: 1,
title: 'Sponge B',
},
{
id: 2,
title: 'John David',
},
]
});
export default Home;
For the Fixture Adapter you are correct in adding the application.js to the adapters folder and import DS from 'ember-data'.
Also in Steve H's example of your home model, the definition of the FIXTURES is not correct. Try using:
Home.FIXTURES = [
...
];
Make sure the pathing is correct.
I'm using ember-cli and trying to make some sense of the structure of the app and how it is all wired together. There are some differences in the main Ember guide docs and what I'm seeing in the ember-cli generated project. I understand the API's are moving fast so I just need to be pointed in the right direction.
In router.js I have the following:
Router.map(function() {
this.route('domains', {path: "/domains" });
});
Then I have models/domain.js
import DS from 'ember-data';
var Domain = DS.Model.extend({
name: DS.attr('string')
});
Domain.reopenClass({
FIXTURES: [
{ id: 1, name: 'User'},
{ id: 2, name: 'Address'}
]
});
export default Domain;
And I have routes/domains.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.all('domain');
}
});
And finally ( I think ), I have templates/domains.hbs
<h1>Domains</h1>
{{#each}}
<p>{{name}}</p>
{{/each}}
Only the header is being rendered when I visit the http://localhost:4200/domains url. I'm using the ember chrome extension and I don't see any data coming back in the request. I'm not sure if it is a naming convention issue or what I'm doing wrong so any help is appreciated.
all just returns records that have already been found in the store. find will issue a request (in this case hitting the fixtures) and populate the store, and also return all of the records in the store.
this.store.find('domain');
The problem ended up being 2-fold. Kingpin2K was right in that I needed to use find instead of all. I also had to change the adapter to the following in adapters/application.js:
export default DS.FixtureAdapter.extend();
I usually use Rails for my Ember apps. However this time we opted to decouple the API from the Ember app, and as such I'm trying EmberCLI. So far it's lovely to setup and use. However when using attempting to use fixtures it doesn't load the data.
As listed in this post I am using reopenClass when declaring the fixtures.
If I do not override the model, it does not error but the Ember inspector also shows no data was loaded. If I override my file with:
// routes/campaigns/index.js
export default Ember.Route.extend({
model: function() {
return this.store.find('campaign');
}
});
And visit the /campaigns path then I get the error I get the error Error while loading route: undefined.
From what I can find this seems to happen when Ember cannot find the data.
My router and model with obvious items like export default excluded:
// app/router.js
Router.map(function() {
this.resource('campaigns', function() {
});
});
// models/campaign.js
var Campaign = DS.Model.extend({
name: DS.attr('string')
});
Campaign.reopenClass({
FIXTURES: [
{ "id": 1, "name": "Campaign #1" },
{ "id": 2, "name": "Campaign #2" }
]
});
I have tested the same setup in a Rails app I just made, and it works perfectly. I'd love any insight people could give, as EmberCLI seems lightweight and worth the effort.
Edit: Adding my app.js file to answer question about whether I included DS.FixtureAdapter:
// Import statements
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: 'nala', // TODO: loaded via config
Resolver: Resolver
});
loadInitializers(App, 'nala');
App.ApplicationAdapter = DS.FixtureAdapter({});
export default App;
You need to set up your application adapter located at the filepath adapters/application.js as follows:
export default DS.FixtureAdapter.extend({});
See the first paragraph under ember-cli Naming Conventions. N.B. you won't need to import DS or Ember if you're using ember-cli and have them listed in your .jshintrc file.
I am working on my first ember application using Ember-cli
Here i want to add feature of image-upload using cloudinary_js
Referring this link
Image Model:
import DS from 'ember-data';
var attr = DS.attr;
export default DS.Model.extend({
imageUrl: attr('string'),
thumbImageUrl: attr('string'),
standardImageUrl: attr('string'),
favourite: attr('string'),
order: attr('number')
});
I have already added the required js files using bower and listed them in Brocfile.js
app.import('vendor/jquery-ui/jquery-ui.js');
app.import('vendor/jquery.iframe-transport/jquery.iframe-transport.js');
app.import('vendor/blueimp-file-upload/js/jquery.fileupload.js');
app.import('vendor/cloudinary_js/js/jquery.cloudinary.js');
Added file field as component:
import Ember from "ember";
export default Ember.View.extend({
tagName: "input",
type: "file",
accept: "image/*",
class: "cloudinary-fileupload",
dataCloudinaryField: "image_id",
attributeBindings: [ "name", "type", "value", "class"],
change: function() {
}
});
Here am stuck with, where to specify the config of cloudinary (cloud name and api key)?
Can anyone please help me with the detailed steps of cloudinary integration with ember using ember-cli.
Thanks.
You'll want to have an initializer that sets the cloud_name and api_key properties. I would put this code in app/initializers/cloudinary.js.
export default {
name: 'cloudinary',
initialize: function() {
$.cloudinary.config({
cloud_name: 'MYCLOUD',
api_key: 'MYKEY'
});
}
};
I wrote a detailed blog post on how to integrate cloudinary_js and Ember a few days ago. There's an example app that uses ember-cli and shows how to configure Cloudinary and everything you'd need to get it up and running. There are some tricky parts to getting the whole thing working, so I'd recommend checking that out if you get tripped up after the config setup right.