I am connecting to an API using a RESTAdapter. This seems to work well in IE9 and upwards. For some reason, when I'm trying to view the data in IE8, I get "Error while processing route: campaigns.index" and nothing else.
The software versions I'm using to create the Ember App is:
Ember : 1.8.1
Ember Data : 1.0.0-beta.8.2a68c63a
Handlebars : 1.3.0
jQuery : 1.10.2
I have tried changing the versions using bower so they are still compatible but I still get an error regarding the index with no explanation.
My route is:
TM.CampaignsIndexRoute = Ember.Route.extend({
model: function(){
return this.store.find("campaign")
}
});
My models attributes are being defined as:
TM.Campaign = DS.Model.extend({
campaign_name: DS.attr(),
campaign_code: DS.attr(),
desc: DS.attr(),
effective_from: DS.attr(),
products: DS.attr(),
type: DS.attr()
});
The JSON is setup as:
{
"campaigns":[
{
"id":"1",
"campaign_name":"Necessitatibus et.",
"campaign_code":"YQADM",
"desc":"1",
"effective_from":"2014-11-24 14:33:07",
"products":"Loans",
"type":"Gold"
},
{
"id":"2",
"campaign_name":"Voluptatem sequi adipisci necessitatibus.",
"campaign_code":"VFYGTO",
"desc":"1",
"effective_from":"2014-11-24 14:33:07",
"products":"Loans",
"type":"Gold"
}
],
"meta":{
"per_page":10,
"total":30
}
}
To get a better understanding of where it was failing with IE 8, I turned on LOG_TRANSITIONS_INTERNAL and it fails when attempting to call the afterModel hook
Attempting transition to campaigns
Transition #1: campaigns: calling beforeModel hook
Transition #1: campaigns: calling deserialize hook
Transition #1: campaigns: calling afterModel hook
Transition #1: campaigns.index: calling beforeModel hook
Transition #1: campaigns.index: calling deserialize hook
Error while processing route: campaigns.index
Transition #1: campaigns.index: transition was aborted
I don't receive any errors regarding Object.create because I'm using the shim to combat this and it seems to work fine.
I have considered reading about creating Ember qunit tests in order to get more information. Is this the right direction to look into or is there some configuration for IE 8 which I'm missing?
Unfortunately, I have to build this app to support IE8 and I'm enjoying using Ember so I'm hoping I can stick with it.
So I started again and stripped away every plugin I had. I'm using Laravel along with Ember to create my application. The Laravel Debug bar was preventing the model from appearing in IE8.
Thanks for your efforts Nicholas. Much appreciated.
Related
EmberJS 3.4
I'm loading a Project entity from a backend which takes a couple of seconds. Now I would like to show a spinner during loading.
as described I created a project-loading.hbs (also tried with loading.hbs) https://guides.emberjs.com/release/routing/loading-and-error-substates/
project model class:
export default AuthenticatedRoute.extend({
model(params) {
return this.store.findRecord("project", params.projectname);
},
actions: {
refresh: function() {
this.refresh();
}
}
});
though it takes time to load the entity, the loading template seems not to be rendered/shown. Am I doing something wrong ?
For a route called project (routes/project.js), the loading template should be called project-loading.hbs.
I cloned your project and actually made it work (Ember CLI 3.4.3) by adding templates/project-loading.hbs, adding a sleep(30) call to your /api/projects/:name endpoint and going to a URL like http://localhost:4200/projects/hallo.
Do you have the problem when transitioning to the route internally (by using transitionTo or the {{link-to}} helper with a model for instance) or by entering the URL manually? Note that model hook is not executed when you transition to a route and pass in a model context (see https://guides.emberjs.com/v3.4.0/routing/specifying-a-routes-model/).
I ended up with adding the following code to the application adapter:
// not very ember way of doing this, but quite simple :)
$(document).ajaxStart(() => {
$('#spinner').removeClass('hide');
});
$(document).ajaxStop(() => {
$('#spinner').addClass('hide');
});
I really would prefer doing it the ember way. for now, this seems to do the trick.
for anyone interested, here's the complete project: https://github.com/puzzle/mailbox-watcher/tree/master/frontend
as the title says, I have some problems understanding how to use an adapter in an ember-engines.
I am currently running my application with ember#2.15, ember-data#2.15 and ember-engines#0.5.14.
I already used an adapter in my main application, but if I tried to reproduce a basic adapter in my application, the page is loading indefinitely.
In my route, I call my adapter with the findAll method:
model()
{
"use strict";
console.log('In my route');
return this.get('store').findAll('my-adapter-name', {reload: true});
}
And in my adapter, I respect the syntax that I used in my in-app adapter:
import DS from 'ember-data';
import Ember from 'ember';
export default DS.Adapter.extend({
findAll: function (store, type, sinceToken, snapshotRecordArray)
{
console.log("In my adapter");
return new Ember.RSVP.Promise(function (resolve, reject)
{
// I accede to my websocket service here, nothing to do with my question
});
},
/* *
* My other function, like findRecord, ect...
*/
});
As you can see, I put some console.log in my code, and I can access the message in my route, which is in my engine, but I can't access the message in my adapter, which is also in my engine.
I tried to put a console.log in an adapter in my application, and the message is properly shown, so I am sure this is because I can't access to the adapter in my engine, so if anybody has an idea to how we should configure our adapter in our ember-engines, this would be very appreciated.
For your information, this is an in-repo engines.
Just found it, this is a bit tricky, but your models (and adapters) should be in the myApp/lib/myEngine/app/models/, and not in myApp/lib/myEngine/addon/models.
I don't know if this is intended this way, but this is the only way I found to add model in your in-repo ember-engines.
EDIT
This will do the trick for the serializers and the transform.
I'm trying to create a service to handle modal dialogs in Ember 1.12 with Ember-cli. Maybe a service isn't the best way to approach this, but I want to access it from just about anywhere in the app, and be able to dynamically insert content into the popup, so it seemed like the right way to go.
Here is my service:
import Ember from 'ember';
export default Ember.Service.extend({
route: Ember.inject.service('route'),
open: function(content){
console.log('open popup', content);
this.get('route').render('popup-box', { //popup-box is a component
into: 'application',
outlet: 'popup'
});
},
close: function(){
//TODO
}
});
When I call the open method, I get this error:
Uncaught Error: Attempting to inject an unknown injection:
service:route
I'm not sure what I'm missing. Suggestions?
You should check out ember-wormhole, https://github.com/yapplabs/ember-wormhole. It will let you target a section of your template to an anchor somewhere else in the dom. It's perfect for modals!
Additional Info:
AS #runspired pointed out, you can't inject the router like you have it.
If you did want to inject the router, you could do so with Ember.inject.service('-routing') or via application.inject('<myTarget>', 'router', 'router:main'); from an initializer.
However, you do not have access to a render method and this could be considered a smell.
I have an application that requires two models in one of the routes.
Here I use RSVP.hash to bundle the two promises into one and return them for the setupController. Somehow one of the records is not retrieved properly and does not contain any data (the server is not requested either). So the state of the record after the promise hash was resolved is still root.empty.
I currently use a workaround that calls a record.reload() from the server, which triggers a refetch, like so:
model: function(param){
return Ember.RSVP.hash({
activities: this.store.find('activity', {'component_id': param.component_id}),
component: this.store.find('component', param.component_id)
}).then(function(models){
//move component manually from DS.RootState.empty to loaded.saved
models.component.transitionTo('loaded.saved');
//force reload returns a promise.
return models.component.reload().then(function(component){
return {component: component, activities: models.activities};
});
});
}
The Stack:
DEBUG: -------------------------------
DEBUG: Ember : 1.11.1
DEBUG: Ember Data : 1.0.0-beta.15
DEBUG: jQuery : 1.11.2
DEBUG: Ember Simple Auth : 0.7.1
DEBUG: -------------------------------
Edit: I have started debugging the issue and realized that the record's isEmpty property is set to false and thus the find does not hit the server.
Since this workaround in my opinion does not look good to me, i feel I must have forgotten something, so my questions are:
Is there a better solution?
What is the root cause of this?
EDIT: is the isEmpty property computed or set manually and if yes where?
If you require more information, I'm more than happy to provide it.
Holding two different types of model in your routes model seems messy to me, I would suggest just loading the model that route pertains to, and then loading subsequent models and setting them on your controller in setupController.
model: function(params) {
return this.store.find('component', param.component_id);
},
setupController: function(model, controller) {
this._super(model, controller);
this.store.find('activity', {'component_id': model.get('id')}).then(function(activities) {
controller.set('activities', activities);
}
}
I have read various stackoverflow threads and other forum entries, but I am not able to figure out how to get nested resources/templates working using ember-cli 0.1.12 and pod structure.
Versions:
Ember : 1.8.1 (also tried 1.9.1)
Ember Data : 1.0.0-beta.12
Handlebars : 1.3.0 (also tried 2.0.0)
jQuery : 1.11.2
My router.js (unchanged, cli created it, only demo purposes):
Router.map(function() {
this.resource("controls", function() {
this.route("statements");
this.resource("handles", function() {});
});
Situation:
No additional modifications besides ember generate commands and text markers in the created template.hbs
Resource "controls": template is displayed as expected
Route "controls/statements": template is displayed as expected
Resource "handles" under resource "controls" is not rendered at at all.
Subsequent routes unter "controls/handles" are also not working.
When I invoke http://localhost:4200/controls/handles, ember inspector only list "application" and "controls" in the view tree. In the ember inspector routes section, it lists: handles.index
HandlesIndexRoute Send to console
HandlesIndexController Send to console
handles/index
/controls/handles
I tried:
Switching ember and handlebar versions - no effect
Not using pod structure - no effect
Manually adding an index.hbs template in the handles pod folder - no effect
I have the feeling that I am missing a basic point here.
Could you please help me out?
Thank you,
Manuel
I can't help on the pod issue but can try on the other point.
What is the nature of your nested resource?
I would be expecting URLs like: "..controls/:control_id/handles".
I would have written this like this:
this.resource('controls', function() {
this.route('statements');
this.route('show', { path: ':control_id' }, function() {
this.resource('handles', function() {
});
});
});
Nick