ember-cli / pod: Nesting resources/templates - templates

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

Related

emberjs loading spinner with findRecord

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

ember-data route's model hook only fetches model properly with forced reload

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);
}
}

Ember-Cli refactoring to use pods

I have just started to refactor our Ember application to use Pods so that our directory/file structure is more manageable. At the same time i have upgraded Ember-Cli so I am running with the following configuration:
Ember : 1.8.1
Ember Data : 1.0.0-beta.12
Handlebars : 1.3.0
jQuery : 1.11.2
I have updated the the environment.js to include the following
modulePrefix: 'emberjs',
podModulePrefix: 'emberjs/pods',
I have also tried to set it to 'app/pods' and just 'pods' but with no luck.
The directory structure is as follows:
emberjs/
app/
controllers - original location, still has some original controllers here for other parts of the system
pods/
job/
parts/
index/
controller.js
route.js
template.hbs
edit/
controller.js
route.js
template.hbs
The application build ok and if i look in the emberjs.js file i can see the various defines for the pods controllers, routes and templates
e.g.
define('emberjs/pods/job/parts/index/controller', ['exports', 'ember'], function (exports, Ember) {
define('emberjs/pods/job/parts/index/route', ['exports', 'ember'], function (exports, Ember) {
define('emberjs/pods/job/parts/index/template', ['exports', 'ember'], function (exports, Ember) {
so something is recognising the pods structure.
But the problem comes when I try to access this route. I get a warning message in the console and get nothing displayed - basically it says it can find the template abd it looks like it is using an generated controller.
generated -> controller:parts Object {fullName: "controller:parts"}
vendor-ver-1423651170000.js:28585 Could not find "parts" template or view. Nothing will be rendered Object {fullName: "template:parts"}
vendor-ver-1423651170000.js:28585 generated -> controller:parts.index Object {fullName: "controller:parts.index"}
vendor-ver-1423651170000.js:28585 Could not find "parts.index" template or view. Nothing will be rendered Object {fullName: "template:parts.index"}
vendor-ver-1423651170000.js:28585 Transitioned into 'jobs.job.parts.index'
If I look in the Ember inspector in Chrome I see that in the Routes section it shows parts/index to have route of parts/index controller as parts/index and template as parts/index.
Is this what I should expect?
I am not sure how Ember resolves the various parts when using pods.
To test this out I put a copy of the template in the templates/parts directory and reloaded it. This time it found the template and rendered it but lacking the data - probably due ti it using the default route and controller.
Does anyone any idea what I am doing wrong. have I missed out a step somewhere, or configured it incorrectly?
Try removing old routes/controllers/templates when adding new ones. Don't keep two copies.
Also it could be unrelated to your files structure. Try creating a blank app and copying files one by one, to see when the issue starts to happen. Use generators and then overwrite the generated files with yours if possible.

Ember, JSON and IE8. Unable to display data

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.

How can I use piwik in an ember application?

Is there any component or plugin that I can use, to integrate piwik into an ember application?
It's very simple actually. Sadly I haven't found out yet how I can track the individual views. But this will get you going with a basic set-up that also scales well.
Put this in your ApplicationRoute it hooks the route's didTransition so that every time you transition between routes data gets send to the Piwik server.
actions: {
didTransition: function () {
Ember.run.once(this, function () {
window._paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
_paq.push(['setTrackerUrl', 'https://[Piwik server]/piwik.php']);
_paq.push(['setSiteId', 1]);
});
}
}
And don't forget to put a reference to Piwik.js in your application template to load the Piwik tracking library.
<script src="https://[Piwik server]/piwik.js" async defer></script>
There doesn't seem to be an all-integrated solution for Ember like there is for AngularJS.
You can have a look at this forum thread which may get you started.
You may also want to have a look at how it's working in AngularJS: http://luisfarzati.github.io/angulartics/ or https://github.com/mike-spainhower/angular-piwik
You can use ember-cli-piwik. It's quite simple:
Install the addon:
ember install ember-cli-piwik
Then configure it in your config/environment.js
piwik: {
sid: 123,
url: 'https://your-piwik.endpoint.com'
}
For more information, read the docs.