I am using EmberJS with django. For my API do I want to use JSONAPI. For this I installed Django rest framework json api. And in Ember do I use the JSONAPIAdapter.
When my Ember app tries to get /appointments/ everything is fine and
"type": "Appointment"
but when my Ember Store tries to save an appointment it goes to the correct URL but
"type": "appointments"
after some testing I concluded that the only type that works is "Appointment", not "appointment" and neither "appointments" or "Appointments".
I don't know why the Ember JSONAPIAdapter does this, but is there a way to fix this problem?
The JSON API spec itself doesn't care if type is singular, plural, dasherized, underscored, etc... It is agnostic about inflection rules.
But Ember uses a convention by default (the examples at JSON API spec use the same convention). Ember's JSONAPIAdapter will pluralize and dasherize your types by default.
The important thing, is that your client and your server use the same convention. I think that's your problem.
If your server uses another convention you could customize your JSONAPIAdapter:
import DS from 'ember-data';
import { underscore } from '#ember/string';
export default DS.JSONAPIAdapter.extend({
pathForType(type) {
return underscore(type);
}
});
Related
I am currently using ember 1.13. I have two apps which use emberjs. Now I am thinking of integrating these two apps by creating a new route in the first app and display specific route of the second app. Many suggested to use ember-engines,but they need ember 2.10 or higher.Since my application mostly depends on IE 8,I cannot migrate from ember 1.x.
So what should I do? Thanks in advance!!
Cheers!!!
So one approach that would work pre engines is to leverage an addon for the common routes. Your addon will define routes, controllers, and templates as usual with the addons directory. You will also want to define something like addons/utils/router-utils:
// assume we have a single route foo
export function addRoutes(router) {
router.route('foo');
}
router is the this value that ember provides when invoking Router.map. So, within your addon, to allow for "normal" feeling development, you'll want to use this addRoutes function within the dummy app router in tests/dummy/app/router.js:
import EmberRouter from '#ember/routing/router';
import config from './config/environment';
import { addRoutes } from 'addon-with-routes/utils/router-utils';
const Router = EmberRouter.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
addRoutes(this);
});
export default Router;
Note well, the above router.js file is what Ember 3.8 generates. Yours will most likely differ but the key point is that we invoke our addRoutes function with the anonymous Router.map this value to dynamically add our routes to the dummy app. See this twiddle for an example of adding routes to the router dynamically.
You can now run ember serve from within the addon project and test your routes. Acceptance tests run against the dummy app as well so you're not really constrained by this approach.
Now within your consuming app, you would do the same thing we did in the dummy app to add the routes. This approach, in general, though will require careful engineering to work effectively (a lot of the problems that ember engines solves must be solved by you in some way). Your addon will most likely have to expose a lot of configuration so that you can route outwards from the addon back into the consuming app which will not know about the routes in the consuming app. You'll have to avoid namespace collisions. Sounds fun though :)
I am brand new to EmberJS, and am going through a tutorial. I am at the part of the tutorial that starts talking about creating services and injecting them into your controllers (I'm not 100% sure if its a controller, but I'm coming from AngularJS, and it seems pretty similar).
In the terminal in my Ember project, I run the command ember g service authentication. I can see that the service was created in the services directory of my app in the file authentication.js. When I try injecting it into my controller however, I get this issue in the browser when I serve up the app locally,
Error: Assertion Failed: Attempting to inject an unknown injection: 'service:authentication
Could this be because I am using a version of Ember that is newer than in the tutorial, and there is a different way to inject services now? I ask that because this is the syntax of the service in the tutorial
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
and this is the syntax of what I have now, auto-created when the project was built with ember new
import Service from '#ember/service';
export default Service.extend({
records: []
});
org.js "Where service is being injected"
import Route from '#ember/routing/route';
export default Route.extend({
authentication: Ember.inject.service(),
setupController(controller) {
this._super(...arguments);
}
});
Thanks you everyone for all the information about EmberJS.However It turns out all I needed to do was restart my local server -.-
In ember version 2.16, you can leverage javascript module api for importing.
Refer this blog post
Refer this full list
if your ember version is below 2.16, then
import ember from 'ember'
export default Ember.Service.extend({
records: []
});
if ember version is >= 2.16 then the below is the right way to import,
import Service from '#ember/service';
export default Service.extend({
records: []
});
Looks like you are using Ember 2.16 (as others have answered it uses the new components modularization and the tutorial you are following looks like 2.15 or prior, as you have also mentioned in your post).
It makes sense that you should use new modules in your new route too:
import Route from '#ember/routing/route';
import { inject as service } from "#ember/service";
export default Route.extend({
authentication: service()
});
One acclaration: the code you are showing is a route class (there are controllers on the route hierarchy, and also there are components that are not part of the route hierarchy). You will be able to inject your brand-new service in any of the mentioned levels.
I am learning to use emberfire but I am having trouble reading data from a database that already exists. In other words, I have an iOS app that uses a firebase database. Data is constantly being changed by users on the iOS app. I am now trying to make a web app, using emberfire, that will read from the same firebase database as the one that the iOS app uses.
The problem is, when I try to use
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('users');
}
});
nothing is found. I am wondering if this is because the data was not written to the database from the emberfire app and therefore it is not aware of the data that the iOS app has written to the database. Does this make any sense? Shouldn't the emberfire app know to search the database for 'users' if it doesn't have any saved in the local this.store ?
try:
return this.store.findAll('user');
the problem may be in plural 'users'
You could try using this.store.query('users', {}); and see if it helps.
Otherwise I'd suggest double and triple checking that you are logged in properly in your Ember app (unless your Firebase rules make your data public).
I am using Ember.js 2.3 (and Ember-Data 2.3). I'm setting up a simple user auth process using Auth0. Nothing fancy yet, just installed Auth0 according to:
https://auth0.com/docs/quickstart/spa/ember2js/no-api
Now, my setup is pretty much exactly the same as the project given here. However, it seems that I can only access the session from application.hbs and not any other template. Or route. Or anything else.
So this handlebars snippet:
{{#if session.isAuthenticated}}
{{session.data.authenticated.profile.name}}
{{else}}
NOPE
{{/if}}
This works on application.hbs, but nowhere else. This does not make sense to me. If Auth0 itself says that session.data can be accessed from any template, and that such a handlebars snippet even exists, there must be something I'm missing. I need to be able to show certain portions of the client side as well as restrict some actions based on the currently signed-in user (and whether someone is actually signed in ), all of which are included in the session.data object.
It doesn't seem appropriate to pass this object to every component I'm going to create, and the only way I can think of getting this data right now is to manually get it from localStorage. I could perhaps make this manual process a mixin and have it included everywhere but before I try to find roundabout solutions, I want to make sure that I'm not missing something in the implementation itself.
How would I be able to access the session token throughout the application aside from application.hbs itself?
EDIT: Updating question in response to comments. My protected route looks like this:
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
});
I am still unable to get session data, unfortunately.
In ember-simple-auth session is a service which You need to inject to the other routes. So if you want to use the session data other than the application template, you need to extend those routes with AuthenticatedRouteMixin
(just like you did in routes/home.js). In controllers you need to inject the service, for example:
// app/controllers/application.js
import Ember from 'ember';
export default Ember.Controller.extend({
session: Ember.inject.service('session')
…
});
Take a look at ember-simple-auth.
You can find another implementation if you check ember-simple-auth-token
Edit:
Try this in your routes/protected_route.js (it works for me)
import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin, {
session: Ember.inject.service('session'),
actions: {
invalidateSession: function() {
this.get('session').invalidate();
}
}
});
I am trying to figure out how to get data from a custom api. I am using Ember 1.8.1, Ember Data 1.0.0-beta.12 and Ember CLI
In my router i have the following resource
this.resource("communities", {path: '/communities/:community-id/follow-ups'}, function() {});
I have my model defined for the correct response. In my communities router I am trying to get the data from the api like so
this.store.find('community', params['community-id']);
The problem I am having is that I am trying to retrive data from the api endpoint
/communities/{community-id}/follow-ups
But the app is trying to grab the data from
/communities/{community-id}
How do I define the custom resource route to pull from the follow-ups
The router path isn't going to change where the API makes the call to, that just helps Ember change the browser path.
You might want to consider using an adapter if you really need it to hit .../follow-ups.
You'd want to make a CommunitiesAdapter I think. ember g adapter communities, or community, not sure offhand.
And I think the function on it you're looking for is pathForType.
Check it out at http://guides.emberjs.com/v1.10.0/models/customizing-adapters/
You can create a custom adapter for your model in particular but deep nesting on routes can be tricky in Ember and not worth the time if you are in a rush.
Try setting the model of the route directly with a get json
App.NAMERoute = Ember.Route.extend({
model : function(params){
return Ember.$.getJSON(window.apiHost+'/communities/'+params.group_id+'/follow-ups');
}
});
Sometimes simple solutions is what you need