Develop Reference

How to fetch data from Mirage in Ember.js?

I need to return a list of users from Mirage. I need this list for rendering it on the front end. How do I do this?

To install mirage:
ember install ember-cli-mirage
Once this is done, you need to configure Mirage to send data. This can be done by updating the file mirage/config.js.
In the mirage/config.js file, its better you define a namespace so that Ember application's call does not conflict with the routes defined already.
Say you want Mirage to return a sample list of users. You can do something like this in the mirage/config.js file:
export default function() {
this.namespace = '/api';
this.get('/users', function() {
return {
// list of users
};
});
}
Now whenever the Ember application makes a get request to /api/users , a list of users is returned.
Only doing this isn't enough, you need to make your application to default making requests to the namespace /api.
This is done by creating an application adapter.
To create an application adapter:
ember generate adapter application
Then in app/adapters/application.js, add the namespace like this:
export default DS.JSONAPIAdapter.extend({
namespace: 'api'
});
Restarting the Ember server would include Mirage in your build.
Say you were making a request for all users in the model function of a route:
export default Ember.Route.extend({
model() {
return this.get('store').findAll('users');
}
})
Here, when you request for all the users, Ember data will fetch all users from /api/users.

How to use javascript library? (Ember JS)

Simple question here, but I can't seem to figure out how to use a dependency I've installed in my ember JS app. I installed the twitter fetcher library via bower.
I have a twitter-container component, and inside of my component.js:
import Ember from 'ember';
export default Ember.Component.extend({
loadPlugin: function() {
var config1 = {
"id": 'XXXXXXXXXXXXXXX',
"domId": 'example1',
"maxTweets": 1,
"enableLinks": true
};
twitterFetcher.fetch(config1);
}.on('init')
});
I get a 'twitterFetcher is not defined' error (obviously), but am not sure how to import it. Should I include a line like this?
import twitterFetcher from 'bower_components/twitter-fetcher'

In ember-cli-build.js, you need to include the below line to bundle it in ember app,
app.import('bower_components/twitter-fetcher/js/twitterFetcher_min.js')
you can refer it as window.twitterFetcher

emberjs findRecord is not implemented

I try to use the Restadapter from emberjs to call my api under 'http://local.ember.api' but I can't get any data. After some respearch I didn't get it working. Here is my code:
I created a file under app/application with the name adapter.js with this code:
import DS from 'ember-data';
import $ from 'jquery';
import config from '../config/environment';
var ApplicationAdapter;
ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://local.ember.api',
namespace: 'api/v1'
});
var ApplicationSerializer;
ApplicationSerializer = DS.RESTSerializer.extend({});
export default ApplicationAdapter;
export default ApplicationSerializer;
and under app/models I have a user.js with this code:
import Ember from 'ember';
import DS from 'ember-data';
var User = DS.Model.extend({});
export default User;
my app/router.js looks like this:
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('users');
this.route('user', {path: '/user/:user_id'});
});
export default Router;
and my app/routes/user.js:
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return this.store.find('user', params.user_id);
}
});
with this setup I get this error:
Error: Assertion Failed: You tried to find a record but your adapter (for test-app#model:user:) does not implement 'findRecord'
when I create a file under app/services with the name store.js and this code:
import Ember from 'ember';
import DS from 'ember-data';
var Store;
Store = DS.Store.extend({});
export default Store;
I get this error:
Error: Assertion Failed: You tried to find a record but your adapter (for test-app#model:user:) does not implement 'findRecord'
when I create a function with the name 'findRecord' in the store.js-File:
Store = DS.Store.extend({
findRecord: function() {}
});
I get no result. Where is the mistake?

I think the problem is that you are calling find on the Store, but the according to the documentation you should be calling findRecord as there is no find. Hence, the error message.
When you create the findRecord method, it's probably being called but since you don't return anything... well you don't get any data back. If you console.log there, it's probably being called.
Edit:
I found the line where that error happens in ember-data's source code (although it's from master). But looking at the source code form 1.13.15 it should have the find method and it should give you a warning.
Can you setup an EmberTwiddle that reproduces the issue?

Error Route Not Found on RestAdapter

I have this route configuration on my router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('about');
this.resource('posts');
});
export default Router;
and inside my routes folder I have this posts.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('post');
}
});
and inside my model folder I have this ember-data model
import DS from 'ember-data';
export default DS.Model.extend({
title: DS.attr()
});
And here's my Adapter
import DS from 'ember-data';
export default DS.RESTAdapter.reopen({
namespace: 'api'
});
However whenever I access the resource(localhost:4200/posts) I receive this error
Error while processing route: posts Not Found ember$data$lib$adapters$rest$adapter$$default<.ajaxError#http://localhost:4200/assets/vendor.js:60763:35
ember$data$lib$adapters$rest$adapter$$default<.ajax/</hash.error#http://localhost:4200/assets/vendor.js:60838:37
jQuery.Callbacks/fire#http://localhost:4200/assets/vendor.js:3350:10
jQuery.Callbacks/self.fireWith#http://localhost:4200/assets/vendor.js:3462:7
done#http://localhost:4200/assets/vendor.js:9518:1
.send/callback#http://localhost:4200/assets/vendor.js:9920:8
NOTE:
I've also set up a mock http rest server using this command ember g http-mock post

Found the solution myself. Turns out the the mock I needed to create a mock with the same name as my resource that's configured in the router.js
so I created a new http mock using this one
ember g http-mock posts
in my case, Turns out that the route specified should be the same as the JSON you are retrieving.

Try to change this.resource('posts') to this.route('posts'). You don't need resources with latest version of ember.

dependency injection without singleton in ember-cli

Just converted my app to ember-cli, but I don't know how to use Ember.Application.register any more because register doesn't seem to be available when Application is started with extend rather than create.
import Ember from 'ember';
import App from 'myapp/app';
var AdminMyController = Ember.ObjectController.extend({
});
// THROWS ERROR HERE BECAUSE register isn't, uh...registered?
App.register('controller:adminMyController', AdminMyController, { singleton: false });
export default AdminMyController;
Previously, because App was a global, I could register this right in the same class.
Am I going to have to move all the register calls to an initializer so I can get access to the app instance?

I belive an initializer would do this for you. You'll need to create an initializers folder in your app directory (same level as controllers, templates, etc). This file should go there.
import Ember from 'ember';
var AdminMyController = Ember.ObjectController.extend({
...
});
export default {
name: 'adminMyController',
initialize: function (container, application) {
container.register('controller:adminMyController', AdminMyController, {singleton: false});
}
};