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.
Related
I'm working on an Ember website with a Node JS Express API. I'm using ember-ajax to connect to the API.
EDIT:
Ember version is 1.13
Ember Data : 1.13.15
The problem is Ember does the AJAX call as if it was directed towards localhost:4200 (Ember) when it should be sent towards localhost:9029 (Express). Of course, this throws a 404.
How do I make it so it sends the request to the API instead of itself? I've tried --pxy after ember s but that does not work. It seems like it's ignoring the files I created. I'm very new to Ember.
app/services/ajax.js
import Ember from 'ember';
import AjaxService from 'ember-ajax/services/ajax';
export default AjaxService.extend({
namespace: '/api',
host: 'http://localhost:9029',
trustedHosts: [
'http://localhost:9029',
]
});
app/routes/test.js
import Ember from 'ember';
import AjaxService from 'ember-ajax/services/ajax';
export default Ember.Route.extend({
ajax: Ember.inject.service(),
model() {
return this.get('ajax').request('/gimmieDatDate', {method: 'POST'});
}
});
Could you write out the full command you used to run the server? Something like
ember s --proxy http://localhost:9029
should work.
You should specify the host in your (application) adapter.
// app/adapters/application.js
export default DS.JSONAPIAdapter.extend({
host: 'https://api.example.com'
});
Docs: https://guides.emberjs.com/v2.4.0/models/customizing-adapters/#toc_host-customization
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?
The link is supposed to send me back to the index page / from the /:id path. When I go back with the browser back button it does not reload the page and all is fine. The link it produces looks fine to me href="/" In other parts of the app for example going back to the index from /new the same {{link-to}} helper works fine.
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('conversations', {path: '/'}, function() {
this.route('new');
this.route('conversation', {path: '/:conversation_id'});
});
});
export default Router;
Back Button in conversation template:
{{#link-to 'conversations'}}
Conversation Route:
import Ember from 'ember';
export default Ember.Route.extend({
model: function(params) {
return Ember.RSVP.hash({
conversation: this.store.find('conversation', params.conversation_id),
messages: this.store.find('message')
});
}
});
Conversations Index Route:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('conversation');
}
});
Very simple solution to be able to find the problem:
In Chrome I activated "Preserve log upon navigation" to be able to see the Error. In the Settings of the Chrome Developer Tools.
Then I removed the problem which in my case was very simple by following the error:
had no action handler for: back
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});
}
};
I have a specific template for both the main app and the public facing pages. Based on the docs the code below is what I thought should work. However I continually get a Cannot read property 'connectOutlet' of undefined error thrown.
router.js
Router.map(function() {
this.route('app');
this.route('login');
});
application.hbs
{{outlet}}
public.hbs
This is the public template
{{outlet}}
app.hbs
This is the app template
{{outlet}}
login.hbs
<input type="email" ...>
<input type="password" ...>
routes/login.js
import Ember from "ember";
export default Ember.Route.extend({
renderTemplate: function() {
this.render('login', { into: 'public' });
}
});
routes/app.js
import Ember from "ember";
export default Ember.Route.extend({
renderTemplate: function() {
this.render('login', { into: 'public' });
}
});
If I remove the {into:..} options no error is thrown but both the login and app templates are rendered into the application template rather then the public and app respectively.
Am I totally misunderstanding how Ember handles the rendering?
In the app that I'm doing with ember I also use the renderTemplate hook to render a template into another one, your code there is the same as mine and looks good.
I think the problem might be that there isn't any public route. I think that if you define one in your router, and then try again, it may work. Looks to me like its not able to render the templates into public because public does not exist.