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');
});
Related
I normally get data from a service I created, a hard-coded JSON. But I need to take the JSON from an URL.
This is my twiddle :
https://ember-twiddle.com/b9cd8b1b3418d876f88235c4aa99e268?openFiles=templates.pic.hbs%2Ctemplates.components.image-list.hbs14
How can I add a URL as a source instead of calling it from the service 'pics'? I tried something but got errors and couldn't do anything. I'm very new at this.
I tried
model() {
return $.getJSON('/my-url');
}
But I get this error :
Mirage: Your Ember app tried to GET 'my URL', but there was no route defined to handle this request. Define a route that matches this path in your mirage/config.js file. Did you forget to add your namespace?
I totally had no idea about the error because I don't use mirage, I created it yeah but didn't use in any part of the project.
Then I tried :
import Ember from 'ember';
export default Ember.Route.extend({
model() {
this.get('my Json url', () => {
return [];
});
}
});
Now chrome's devTool doesn't give any error but all I see is a blank-page. Is this all wrong or is it something about the .hbs files?
Any ideas?Thanks!
Uninstall ember-cli-mirage and go back to:
model() {
return $.getJSON('/my-url');
}
I figured what the problem was with some help :
Solution:
In my index.js, I should have used
{{image-list model=model.Data currentPos=currentPos }}
instead of
{{image-list model=model currentPos=currentPos }}
Also, I don't need any model/*.js because I get the model() from IndexRoute so I deleted those files. Thanks
I have this resource with a nested route in my ember app:
router.js:
Router.map(function() {
this.resource('posts', function () {
this.route('show', {path: '/:id'});
});
});
What is the convention in ember for my controllers? Do I create a separate file for each URL, or does the show handler go in /controllers/posts.js? Or is there perhaps multiple correct ways of doing this?
This is what I have so far in /routes/posts.js:
import Ember from 'ember';
var PostsRoute = Ember.Route.extend({
model: function() {
return posts;
}
});
var posts = [
{
id: '1',
title: 'Object nr one',
content: 'This is the content of Object nr one.'
},
{
id: '2',
title: 'Obelix',
content: 'A fat gaul. From a comic book.'
},
{
id: '3',
title: 'Werner',
content: 'Wat soek werner hier? Dis mos nou belaglik man.'
}
];
export default PostsRoute;
And this is /controllers/posts.js:
import Ember from "ember";
export default Ember.ArrayController.extend({});
I would appreciate if someone showed me the correct way of doing things in this example.. I'm really struggling to find proper examples on the web.
Please note that I'm using ember CLI
"Show handler" never goes to controller file, it's rather a Route. You create separate route, controller, template for each of your resource or route directives. You can tell controller that it should have the same behaviour as other controller, or use a mixin. For example:
router.coffee:
#resource 'training', ->
#route 'chest'
#route 'shoulders'
Means you need following structure:
app/routes/training[your parent resource]/chest.js[your child route]
app/routes/training/shoulders.js
If you need controller for each of this routes you would need files with following paths:
app/controllers/training/chest.js
app/controllers/training/shoulders.js
And templates:
app/templates/training/chest.js
app/templates/training/shoulders.js
It's because I've defined training as resource(parent) and routes as its children.
If you use Ember CLI you can use commands like:
ember g controller training/shoulders
or:
ember g route training/shoulders
Last command will generate you: Route, template and entry in router.js. You can use this commands so you won't have worry too much about your directory structure.
However, it's important to remember that when you define resource inside a resource - child resource isn't really a child and it shouldn't be placed inside parent resource directory. For example:
#resource 'tracks', ->
#resource 'track', path: '/track/:track_id', ->
#route 'edit'
Means you need 2 directories to store route files:
app/routes/tracks/
index.js
app/routes/track/
edit.js
Instead of app/routes/tracks/track/edit.
So, in your example, for following router:
Router.map(function() {
this.resource('posts', function () {
this.route('show', {path: '/:id'});
});
});
app/routes should look like this:
app/routes:
- posts.js # main route for whole resource
- posts/ # directory which contains files for routes inside posts resource
- show.js # posts/show route
Is there a way to execute when a "base" route is activated/re-activated? I have the following urls:
Router.map(function() {
// /projects
this.resource('projects', function() {
// /projects/2
this.resource('project', {path: ':id'});
});
});
I'd like to transitionTo the individual project route if there is only one project returned from the projects route. I can do this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('project');
},
afterModel: function(projects, transition) {
if (projects && projects.get('length') === 1) {
this.transitionTo('project', projects.get('firstObject'));
}
}
});
This works nicely...except i can still go to the projects route and since the model has already been loaded that hook doesn't fire again. Is there a way to listen to always enforce that rule when the projects route is activated?
For example, if i go to /projects/23 and then i go to /projects i'd like to auto-transition them to the single project route if there is only one. I don't know how to accomplish that since it's a nested route and the activate and afterModel methods have already been fired when visiting /projects/23 for the first time.
Does that make sense? and how can i accomplish this?
Use an index route on your projects resource. It will only get hit when you hit /projects
ProjectsIndex
export default Ember.Route.extend({
model: function() {
var projects = this.modelFor('projects');
if (projects && projects.get('length') === 1) {
this.transitionTo('project', projects.get('firstObject'));
}
},
});
I'm building an app with file manager like functionality with Ember.js. I'd like the URL for nested folder in the form of ".../#/files/Nested/Inside/" and it works fine with linkTo; however if I refresh (or go to the URL directly) I have the error message "No route match the URL '/files/Nested/Inside'". Is there any way to make Ember.js works in situation like this? Thanks.
Here is my current route setup:
FM.Router.map(function() {
this.resource('folders', { path: '/files' })
this.resource('folder', { path: '/files/:path' })
})
FM.FoldersRoute = EM.Route.extend({
model: function() {
return FM.Folder.find('/')
}
})
FM.FolderRoute = EM.Route.extend({
model: function(params) {
return ns.Folder.find(params.path)
},
serialize: function(folder) {
return { path: folder.get('path') }
}
})
Wow, interesting question. It should be possible but I've not tried it myself or seen any examples of this in the wild.
Under the hood, ember uses the tildeio router and route-recognizer to resolve routes. The route's readme explains how to define more elaborate routes like:
router.map(function(match) {
// this will match anything, followed by a slash,
// followed by a dynamic segment (one or more non-
// slash characters)
match("/*page/:location").to("showPage");
});
So to get nested folders working, you might be able to do something like this:
FM.Router.map(function() {
this.resource('folders', { path: '/files' })
this.resource('folder', { path: '/files/*path' })
})
Hope this helps.
I have a working app using Backbone 0.5.3, which is no longer working using backbone 0.9.2.
I identified that Router.navigate() doesn't call my route for some reason.
Here's my Router:
var Router = Backbone.Router.extend({
routes: {
'/mypage': 'mypage',
},
mypage: function() {
// show page ...
}
});
Calling the route manually like so works fine:
Router.mypage()
I also tried to overwrite backbone's .navigate method to debug my app ...
var Router = Backbone.Router.extend({
routes: {
'/mypage': 'mypage',
},
navigate: function(fragment, options) {
console.log("navigate called");
Backbone.history.navigate(fragment, options);
},
mypage: function() {
// show page ...
}
});
... it seems that .navigate is called but ...
Backbone.history.navigate(fragment, options);
... just doesn't call the route.
I'm using PushState, here's my initial call:
Backbone.history.start({
root: '/',
pushState: true,
silent: true
});
Already tried it without the root and silent parameters - no success.
Again: This works using Backbone 0.5.3.
Thanks to everyone leaving a reply!
Achim
You have to set the trigger option for the navigate method, e.g:
Router.navigate("/mypath", {trigger: true})
From the fine manual:
extend Backbone.Router.extend(properties, [classProperties])
Get started by creating a custom router class. [...] Note that you'll want to avoid using a leading slash in your route definitions:
I'm guessing that you simply need to remove the leading slashes from your routes, for example:
routes: {
'mypage': 'mypage',
},
You must create instance of Router.
var router = new Router();
router.navigate(...);