EmberCLI app errors when using fixtures - ember.js

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.

Related

Fixture file not found in Ember project

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';

How to do dependency injection in Ember with Ember CLI?

First, I made a small Ember app without Ember CLI.
I had this piece of code.
window.MyApp = Ember.Application.create({
ready: function() {
this.register('session:current', MyApp.SessionController, { singleton: true });
this.inject('controller', 'session', 'session:current');
}
});
This worked.
Then I decided to rewrite everything from scratch with Ember CLI.
I edited the file app/app.js and added the ready hook just like in my previous version.
var App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver,
ready: function() {
this.register('session:current', App.SessionController, { singleton: true });
this.inject('controller', 'session', 'session:current');
}
});
This doesn't work.
The session controller does exist. That's the content of the file app/controllers/session.js
export default Ember.Controller.extend({
isLoggedIn: false,
});
The error message I get is
TypeError: Attempting to register an unknown factory: `session:current`
It appears in the browser.
I googled that message, but I found nothing about dependency injection in Ember CLI.
Any idea?
In ember-cli you can use ember generate service <name of service> and ember generate initializer <name of initializer> to build the stubs to achieve this, which is far better than fiddling about with app.js.
You create a service basically like this:
// app/services/notifications.js
import Ember from 'ember';
export default Ember.Object.extend({
initNotifications: function() {
// setup comes here
}.on('init'),
// Implementation snipped, not relevant to the answer.
});
And the initializer, which injects the service into the component(s) of your application which need it:
// app/initializers/notifications-service.js
import Notifications from '../services/notifications';
export default {
name: 'notification-service',
after: 'auth-service',
initialize: function( container, app ) {
app.register( 'notifications:main', Notifications, { singleton: true } );
app.inject( 'component:system-notifications', 'notificationService', 'service:notifications' );
app.inject( 'service:auth', 'notificationService', 'service:notifications' );
}
};
With that, it becomes available as notificationService on the components specified.
Documentation on the subject of dependency injection in Ember can be found at http://emberjs.com/guides/understanding-ember/dependency-injection-and-service-lookup/

How to properly use Fixtures with ember-cli project structure

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();

Integrate cloudinary_js with ember

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.

Ember App Kit with ember data

I'm trying to start a new project with ember app kit and ember data using ES6. I've managed to create a store using the following code in adapter.js
var ApplicationAdapter = DS.FixtureAdapter.extend();
export default ApplicationAdapter;
However, I'm failing to create a model and access it. In models/account.js I have this
var Account = DS.Model.extend({
name: DS.attr('string')
});
Account.FIXTURES = [
{
'id': 1,
'name': 'Acc 1'
}, {
'id': 2,
'name': 'Acc 2'
}
]
export default Account;
and in my routes/accounts.js I have this:
var AccountsRoute = Ember.Route.extend({
model: function() {
var store = this.get('store');
return store.find('account');
}
});
export default AccountsRoute;
At this stage I'm simply trying to get a list of accounts from the fixtures displayed on screen. The route works nicely and if I put in static data (like the index route) then all works fine. However, with the code above, I run into trouble
DEPRECATION: Action handlers contained in an `events` object are deprecated in favor of putting them in an `actions` object (error on <Ember.Route:ember352>)
at Object.triggerEvent (http://localhost:8000/vendor/ember/index.js:30519:13)
at trigger (http://localhost:8000/vendor/ember/index.js:29641:16)
at handleError (http://localhost:8000/vendor/ember/index.js:29903:9)
at invokeCallback (http://localhost:8000/vendor/ember/index.js:8055:19)
at null.<anonymous> (http://localhost:8000/vendor/ember/index.js:8109:11)
at EventTarget.trigger (http://localhost:8000/vendor/ember/index.js:7878:22)
at http://localhost:8000/vendor/ember/index.js:8180:17
at Object.DeferredActionQueues.flush (http://localhost:8000/vendor/ember/index.js:5459:24)
at Object.Backburner.end (http://localhost:8000/vendor/ember/index.js:5545:27) index.js:394
Error while loading route:
Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
index.js:394
Uncaught #<Object> index.js:30566
Where am I going wrong?
Your Account model is using the DS.RESTAdapter instead of the DS.FixtureAdapter, because you are setting the adapter in ApplicationAdapter, the expected is AccountAdapter. So you receive an error from the ajax, probably because the url does not match a server.
To configure the DS.FixtureAdapter per model use:
var AccountAdapter = DS.FixtureAdapter.extend();
export default AccountAdapter;
Or as global adapter for all models:
App.Store = DS.Store.extend({
adapter: DS.FixtureAdapter
});
I hope it helps
I think the real issue was that you defined your Fixture Adapter in adapters/adapter.js.
When you called:
store.find('account');
It correctly found the model but then looked for the correct adapter. You don't have an adapters/account.js so it used the application default, which has been mentioned is a RESTAdapter.
To get your example working, just change the filename.
I was getting the same error...
However I was able to fix this by importing my ApplicationAdapter, and using that to define my store:
app/adapters/application.js:
var ApplicationAdapter = DS.FixtureAdapter.extend();
export default ApplicationAdapter;
app/store/application.js:
import ApplicationAdapter from 'appkit/adapters/application';
var Store = DS.Store.extend({
adapter: ApplicationAdapter
});
export default Store;
Keep in mind I have not changed the default application name away from appkit yet, you may have to change this name or the paths to make this function properly for you.