Ember app, using Ember CLI, ember-data and http-mock.
I can't seem to connect to the store from the clubs/index route.
This seems to be the offending code. If I remove the call to the store, and include an inline model everything works fine. Nop idea why it can't find the store.
// clubs/index.js
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('club');
}
});
The http-mock works just fine when I curl it:
curl -H "ContentType:application/json" http://localhost:4200/api/clubs
Everything else is pretty standard:
// router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.resource('clubs', function() {
});
});
export default Router;
// club.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string')
});
Any help much appreciated!
The problem looks to be that your app is hitting /clubs while your api is located at /api/clubs. To fix this you can create an ApplicationAdapter in app/adapters/application.js to properly namespace your api:
import DS from 'ember-data';
export default DS.ActiveModelAdapter.extend({
namespace: 'api'
});
Related
I would like to have common routes defined in my addon, which can be shared by our multiple projects.
I saw a solution in the Ember Forum but I'm not sure if this is the right approach or If I'm doing it rigth.
http://discuss.emberjs.com/t/how-to-extend-router-by-mixin-defined-in-an-addon/7553/5
addon/utils/route_setup.js:
export default function(self) {
self.route('home', {path: ''});
self.route('thanks');
};
app/router (dummy app):
import Ember from 'ember';
import config from './config/environment';
import coreMap from '../utils/route-setup';
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function () {
coreMap(this);
});
export default Router;
Error:
Error: Could not find module `utils/route-setup` imported from `dummy/router`
Solved, it was just the path
import coreMap from 'project-app/utils/route-setup';
I'm building an Ember webapp using Ember CLI build system. I get the below error while trying to fetch all plans from the server API. Any idea what causes it ?
Stack trace:
Error while processing route: index Maximum call stack size exceeded RangeError: Maximum call stack size exceeded
at new Boolean (native)
at Boolean.toString (native)
at Object.typeOf (http://website.com/assets/vendor.js:32058:86)
at Object.Ember.assert (http://website.com/assets/vendor.js:17478:17)
at get (http://website.com/assets/vendor.js:29793:13)
at __exports__.default.Mixin.create.get (http://website.com/assets/vendor.js:45505:16)
at Ember.DefaultResolver.extend.findModuleName (http://website.com/assets/vendor.js:72622:12)
at resolveOther (http://website.com/assets/vendor.js:72487:37)
at superWrapper (http://website.com/assets/vendor.js:31677:22)
at __exports__.default.EmberObject.extend.resolve (http://website.com/assets/vendor.js:17216:27)
This happens when loading the model for the index route. When I'm not loading the model, everything works fine.
routes/index.js:
import Ember from 'ember';
export default Ember.Route.extend({
renderTemplate: function(){
this.render('index-unsubscribed');
},
model: function() {
return this.store.find('plan'); // if I comment this line, works fine
}
});
router.js snippet:
Router.map(function() {
this.route('index', {path: '/'});
});
adapters/application.js:
import DS from 'ember-data';
export default DS.Store.extend({
revision: 1,
adapter: DS.RESTAdapter.extend({
namespace: 'api'
})
});
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;
Nevermind, apparently I extended both store and adapter instead of only the adapter inside adapters/application.js. Correct version:
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
namespace: 'api'
});
After migrating from global-namespace-version to ember-cli (0.1.4), my code doesn't work as before. I'm watching the content property in my controller to handle the data, fetched in my route. But nothing happens, the groupedResults function isn't called.
The data is fetched successfully (Ember Inspector shows all projects), so the content property shouldn't be empty.
Router
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin, {
controllerName: 'organization-projects',
model: function() {
return this.store.find('project');
},
renderTemplate: function() {
// render all projects
this.render('organization/projects-list', {
into: 'application'
});
// render toolbar
this.render('organization/toolbar', {
into: 'application',
outlet: 'toolbar'
});
}
});
Controller
import Ember from 'ember';
export default Ember.Controller.extend({
groupedResults: function () {
console.log(this.get('content'));
}.property('content.[]')
});
Are there some breaking changes that I've missed?
Got it: changed controllerName: 'organization-projects' to controllerName: 'organization.projects'.
But I wonder why this worked in my old global-namespace-version.
I'm getting the following error while using DS.EmbeddedRecordsMixin when my records have embedded data:
TypeError: Cannot read property 'typeKey' of undefined
I'm using Ember CLI 0.1.2 with Ember 1.7.0 and Ember Data 1.0.0#beta11
My adapters:
Application Adapter - /app/adapters/application.js (RestAdapter):
import DS from 'ember-data';
import config from '../config/environment';
export default DS.RESTAdapter.extend({
namespace: config.APP.RestAdapterNamespace,
host: config.APP.SERVER_LOCATION
});
Adapter in question - /app/adapters/screen.js (screenSlideGroups should be embedded):
import ApplicationAdapter from './application';
import DS from 'ember-data';
export default ApplicationAdapter.extend(DS.EmbeddedRecordsMixin, {
attrs: {
screenSlideGroups: { embedded: 'always' }
}
});
Model: /app/models/screen.js
import DS from 'ember-data';
export default DS.Model.extend({
name: DS.attr('string'),
path: DS.attr('string'),
screenSlideGroups: DS.hasMany('screen-slide-group')
});
Example of data returned from the API:
{
"screen":[
{
"id":1,
"name":"Weather",
"path":"weather",
"screenSlideGroups":[
{
"id":1,
"screen":1,
"slideGroup":1,
"order":1
}
],
"lastUpdated":"2014-09-18T18:26:25.69"
},
{
"id":2,
"name":"Front Lobby",
"path":"frontlobby",
"screenSlideGroups":[
],
"lastUpdated":"0001-01-01T00:00:00"
}
]
}
I also tried removing screen from the embedded record, incase the backwards reference could screw it up, but it didn't make a difference. As far as I can tell, the EmbeddedRecordsMixin adapter I created may not be getting used at all.
Any ideas on what may have gone wrong here?
Turns out I misread the documentation, and DS.EmbeddedRecordsMixin should be on the Serializer, NOT the Adapter.
The correct implementation was as follows:
/app/serializers/screen.js:
import DS from 'ember-data';
export default DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
screenSlideGroups: { embedded: 'always' }
}
});
Where/how can i adjust the Ember.Inflector Class / create an instance of it that ember-cli picks up?
Thanks!
I generated an initializer and put this data there. This ensures it loads before anything that might need it. Like the model, adapter, or serializer.
initializers/inflector.js
import Ember from 'ember';
export function initialize(/* container, application */) {
var inflector = Ember.Inflector.inflector;
inflector.uncountable('aamc-pcrs');
}
export default {
name: 'inflector',
initialize: initialize
};
I placed it in the model file and it worked fine:
import DS from 'ember-data';
import Ember from 'ember';
var inflector = Ember.Inflector.inflector;
inflector.irregular('nota', 'notas');
inflector.singular(/nota/, 'nota');
export default DS.Model.extend({
title: DS.attr('string'),
description: DS.attr('string'),
language: DS.attr('string'),
body: DS.attr('string')
});
The Ember Guides covers this in Models - Customizing Adapters:
Create the file app/models/custom-inflector-rules.js:
import Inflector from 'ember-inflector';
const inflector = Inflector.inflector;
inflector.irregular('formula', 'formulae');
inflector.uncountable('advice');
// Meet Ember Inspector's expectation of an export
export default {};
Then in app/app.js add the line:
import './models/custom-inflector-rules';
And if you want to use this in a unit test for a serializer/adapter then you can just import the custom-inflector-rules file into the test.