Ember.js Rails Error while loading route: - javascript

I'm currently reading the Master Time and Space Ember.js tutorial and trying to build the sample application. I'm building the ember app with rails using the ember-rails gem.
I have followed the instructions for building my index route, controller, model and template. However, my index.hbs template is not being rendered due to this error that I am receiving in the console:
Error while loading route: undefined logToConsole
this function logToConsole is defined within the ember.js file that the gem compiles for you.
My router is defined as app/assets/javascripts/routes/app_router.js
TimeTravel.Router.reopen({
location: "history"
});
TimeTravel.Router.map(function(){
this.route("index", {path: "/"});
});
The index route is defined as app/assets/javascripts/routes/index_route.js
TimeTravel.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('trip');
}
});
The controller app/assets/javascripts/controllers/index_controller.js
TimeTravel.IndexController = Ember.ArrayController.extend({
});
Can someone please explain this error? Or at least point out some good debugging tools for ember. Thanks in advance!

Related

EmberJS 2 route dynamic segment in not nested routes undefined

Really new to ember and trying to setup basic (in my mind) routes.
I have calendars resource and I want to display individual calendars.
My app/router.js has the following:
this.route('calendar', {path: 'calendars/:calendar_id'}, function () {
this.route('show');
this.route('edit');
});
this.route('calendars', function(){
this.route('create');
});
Folders are as following:
app/routes: [
calendars: [create, index],
calendar: [edit, show]
]
app/templates: [
calendars: [create, index]
calendar: [edit, show]
]
In app/routes/calendar/show.js:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('calendar', params.calendar_id);
}
});
Problems start when I go to http://SERVER/calendars/5/show (5 is a :calendar_id part, SERVER is what hosts ember app) :
when I log params - they are undefined
In dev tools I see that Ember somehow makes a POST request to my server as http://SERVER/calendars/5
(a :calendar_id part, SERVER is on same domain and where my back-end resides).
This happens regardless if I comment out model() function in app/routes/calendar/show.js file.
Apparently Ember knows what calendar_id to use for that request.
But I don't know where that call to the server happens:
If I comment out model(){} altogether, my template renders model record (the calendar record that Ember fetches).
If I on the other hand try to log params in model() and I comment out this.store.findRecord part out, the params are undefined and it raises an error.
I thought at first that it is my DS.RESTAdapter since I have defined updateRecord changes to fake PUT request (my server does not allow that), but I commented out the whole file and it still does this query.
I've cleaned both dist/, tmp/, upgraded to 2.9.0, but it does the same thing.
I have no controllers defined
How does Ember make POST request if model() hook is missing from route, I have no controllers difined. Also how do I fix it so that it works? ;p
Edit [2]:
I am trying this now and I think it kinda works, but looks ugly:
this.route('calendars',{ path: '/calendars'}, function(){
this.route('create');
});
this.route('calendar', { path: '/' }, function () {
this.route('show', { path: '/calendars/:calendar_id/show' });
this.route('edit', { path: '/calendars/:calendar_id/edit' });
});
this.route('index', { path: ''});
Ember is smart enough to generate a default route if you do not create one, and a default model if you do not create a model function.
It does this based on the routes name ie if your route is "calendar" it generates a model function based on the "calendar" model.
Try explicitly define your route path with the parameters as per ember docs:
https://guides.emberjs.com/v2.9.0/routing/defining-your-routes/
this.route('calendar', function () {
this.route('show', { path: '/:calendar_id/show' });
this.route('edit', { path: '/:calendar_id/edit' });
this.route('create');
});

EmberJS: Application loading route and template

I've been trying to implement loading indication feature when my application bootstraps and begin to load data from server using ember-data. Created templates/loading.hbs template.
So far loading template is not being rendered while application starts, even tried to emulate network latency using {latency: 4000} option.
routes/application.js
export default Ember.Route.extend({
model: function() {
return this.store.find('items');
}
});
templates/loading.hbs
<div class="loading-overlay">
<div class="spinner"></div>
</div>
Library versions
ember-cli 0.0.39
ember 1.6.1
handlebars 1.3.0
ember-data 1.0.0-beta.8
Also thanks to Balint Erdi who has a great blog on frontend development with EmberJS http://balinterdi.com/2014/06/18/indicating-progress-loading-routes-in-ember-dot-js.html
Solution
Samples at http://emberjs.com/guides/routing/loading-and-error-substates/
really helped.
App.LoadingView = Ember.View.extend({
templateName: 'global-loading',
elementId: 'global-loading'
});
App.ApplicationRoute = Ember.Route.extend({
actions: {
loading: function() {
var view = this.container.lookup('view:loading').append();
this.router.one('didTransition', view, 'destroy');
}
}
});
Can any one help me with this?
You would also need a LoadingRoute (Loading and error substates) or handle the loading action in the application route

How to create two separate pages in ember

I am trying to integrate ember into my grails app. I've got one page working in Ember but am unsure of how to have two different pages.
I have a page called color.gsp the server does nothing but just redirects to this page so the method is just def color() {}
In this page I have several templates one of which is Application template. I have a App.js which handles everything on this page and everything is working fine on this page.
Question
Now I want to have another page called shade.gsp where also the server should not do anything by redirect so again the method will simply be def shade() {}.
The problem is, how would App.js know whether to update application template in shade.gsp or color.gsp.
I understand this might not be the ideal way to do things in ember. but since I'm integrating ember rather than complete overwrite, i need this option to work. Is there a way I can have separate JS files for color and shade?
I think that changing your js structure, to reflect your dependencies can solve this problem.
// App.js
App.Router.map(function() {
this.route('color');
this.route('shade');
});
// Color.js
// here all color resources
App.ColorRoute = Ember.Route.extend({
// your implementation
});
// Shade.js
// here all shade resources
App.ShadeRoute = Ember.Route.extend({
// your implementation
});
In your ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery', 'handlebars', 'ember'
resource url:'js/App.js'
}
shade {
dependsOn 'application'
resource url: 'js/Shade.js'
}
color {
dependsOn 'application'
resource url: 'js/Color.js'
}
}
In shade.gsp
<r:require modules="shade"/>
In color.gsp
<r:require modules="color"/>

How do I set the root URL in Ember

My Ember app lives in example.com/path/to/ember_app.
My problem is that Ember seems to be rooting everything based on the site root, not the root of the application, so when I would expect ember to root to:
example.com/path/to/ember_app/**news_items**
I'm getting a 500 (Internal Server Error) (GET) on example.com/news_items.
MyApp.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('example.path');
}
});
this should help you, this basically redirects the index route of your app to the example.path route.

Where do I put the code to bootstrap a collection into backbone.js?

I am new to javascript and I saw another post with a similar question but I'm not sure how to actually inject models into a backbone.js that lives in a separate file.
In my index file I have the following which is starting the app:
$(function () {
var app = new App();
Backbone.history.start();
});
Inside my application.js file I have the router which needs to have customers:
window.App = Backbone.Router.extend({
routes: {
"": "home"
},
home: function () {
console.log("route::home");
console.log(this.customers);
}
});
How can I actually get this.customers to be injected into the application? Where does this code live?
I wrote an article that outlines how code like what you've shown here is potentially an anti-pattern, and illustrates a simple way of getting the data bootstrapped. Though your direct question is not the purpose of this article, I think the contents of this article should lead you in a direction that does solve the problem your running in to.
http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/

Categories