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.
Related
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');
});
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!
I am playing around with Ember and I have a simple page in which I try to define some routes like this:
App.Router.map(function() {
this.resource('posts', function() {
this.route('new');
});
});
This code is exactly copied from here. When I try to open index.html#posts in my browser, I get this error:
Assertion failed: The URL '/posts.index' did not match any routes in your application
I am running Ember 1.2.0.
you also must define a posts index route
App.PostsIndexRoute = Em.Route.extend({
});
or just the posts route
App.PostsRoute = Em.Route.extend({
});
http://emberjs.jsbin.com/ENEHUQI/1/edit
I am generating a static site using Jekyll. I am using backbone.js to do few routings.
Suppose the home page is at localsite.com... I am not sure how to generate routes for the following URLs.
http://localsite.com/hulk &
http://localsite.com/thor
The hulk and thor are the names to be routed.
and my backbone.js router is as follows:
<script>
var AppRouter = Backbone.Router.extend({
routes: {
":name": "nameRoute" // should match http://localsite.com/anything-here
}
});
// Initiate the router
var app_router = new AppRouter;
app_router.on('route:nameRoute', function(name) {
console.log(name);
})
Backbone.history.start({pushState: true});
</script>
I am not able to get this working. Is there something I am missing?
Will I be able to do this routing with Jekyll?
My Jekyll's _config.yml has
permalink: pretty
How do get these routes working?
Are there any other suggestions? My goal is to get a similar routing when hosted on github pages.
As far as the routing goes, it is pretty straight forward. The second part is the name of the function that will be called, which should be defined inside your router. So just change your code to this and it should work:
var AppRouter = Backbone.Router.extend({
routes: {
":name": "nameRoute" // should match http://localsite.com/anything-here
},
nameRoute: function(name){
console.log(name);
}
});
// Initiate the router
var app_router = new AppRouter;
Backbone.history.start({pushState: true});
If you run into trouble with pushState and getting rid of the backbone-default hashtags, check out this SO question BackboneJS - Router issues - how to get clean URL's (particularly important for local links, if you don't want to keep reloading from the server), and here is an example of a site getting rid of their #: http://artsy.github.io/blog/2012/06/25/replacing-hashbang-routes-with-pushstate/
I've an application running on my wamp server. The directory structure looks like this
Wamp/www/applicationliveshere However I've an ember application within the same directory and it's structure looks like this Wamp/www/emberApp/applicationliveshere
I've set up my php project using REST so that I can access the my data using eg. Get http:localhost/emberApp/videos will return all the videos in the database as Json to the client. However my problem is in Ember I'm unsure how to set up my routes to use localhost/emberApp/videos. Currently each time I load the page the controller is using localhost/videos and returning with the a 404 Not found. I am using 'ember-data.js' to handle my models. And I have created a Store as follows
Videos.Store = DS.Store.extend({ revision: 12, url: "http://localhost/emberApp/"})
My Videos route is defined like this
Videos.VideosRoute = Ember.Route.extend({ model: function(){
return Videos.Video.find();
}
});
I also have the path set as follows
Videos.Router.map(function({
this.resource('videos', {path: '/'});
});
So to clarify I want all my routes to begin with http://localhost/emberApp/.....
But at the moment I have http://localhost/....
Any ideas?
Thanks in advance.
For the behavior you need you should also define the namespace on the adapter additionally to the url in the store.
For example:
App.Adapter = DS.RESTAdapter.extend({
namespace: 'emberApp'
});
Videos.Store = DS.Store.extend({
revision: 12,
url: "http://localhost/",
adapter: App.Adapter
});
This will result in http://localhost/emberApp/ as your base url.
Have also a look here for info on that.
Hope it helps.