In Flow Router, I have some routes
/projects/project-name
/projects/project-name/tasks
/projects/project-name/tasks/deleted-tasks
/projects/project-name/tasks/completed-tasks
/projects/project-name/tasks/labels/school
/projects/project-name/tasks/labels/football
/projects/project-name/tasks/labels/training
/projects/project-name/tasks/labels/personal
[...]
So almost all of my routes should share most of the same characteristics.
Are there any tricks to group my routes, so I do now have to check if the project exists in every single route or if can I say that some routes build upon other routes, so I do not have to write the long paths for all the routes?
I have found Flow Router, but it doesn't seem that's right tool to accomplish what I need.
Flow router definitely has the ability to group your routes. You can group them as follows -
var projectRoutes = FlowRouter.group({
prefix: '/projects/project-name',
name: 'projects',
});
To handle routers within this group, you can add
// route for /projects/project-name
projectRoutes.route('/', {
action: function() {
BlazeLayout.render(...);
}
});
// route for /projects/project-name/tasks
projectRoutes.route('/tasks', {
action: function() {
BlazeLayout.render(...);
}
});
This is just an example for grouping your routes.
You can read more here.
Related
I have an ember app which requires the following views:
One to view all reviews that you've posted - /reviews
One to view a user's profile - /users/:id
One to view all reviews that another user has posted - /users/:id/reviews
I am struggling with the third one.
Here is my router.js
this.route('reviews', function() {
this.route('show', { path: "/:id" });
});
this.route('users', function(){
this.route('show', {path: '/:id'}, function () {
this.route("reviews", function(){});
});
});
My template for this route is in
templates/users/show/reviews/index.hbs
And my route is in routes/users/show/reviews/index.js
But when I visit localhost:4200/users/1/reviews, it shows the user profile path (users/:id - the second bullet point). Like exactly the same
How do I get this route to work with the correct template and route.js file?
Your route should be like:
this.resource('reviews', function() {
this.route('show', { path: '/:id'})
})
The previous means you will have available the following routes:
/reviews <- default route index for resource reviews
/reviews/:id <- this is the route show
And should have the following files:
Route -> app/routes/reviews/show.js, app/routes/reviews/index.js
Controller -> app/controllers/reviews/show.js, app/controllers/reviews/index.js
Template -> app/templates/reviews/show.hbs, app/templates/reviews/index.hbs
Note that if if you do not define any of previous files ember will generate one by default.
For users should follow the same logic that previous definition.
this.resource('users', function() {
this.resource('user', { path: '/:id' }, function () {
this.route("reviews");
});
});
Translate the previous definition for Users you will have the follow route.
/users <- the default index for resource users
/users/:id <- the default index for resource user
/users/:id/reviews <- the route for reviews inside users
Hope help you!
I have a Router.map defined to my application. I'm working with EmberJS AppKit architecture. https://github.com/stefanpenner/ember-app-kit
I'd like to access to my page "profile" using the following path:
http://localhost:8000/#/profile
But, the name of my route differ to this path, because it's call user-profile, so I did this:
router.js
var Router = Ember.Router.extend();
Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
});
export default Router;
user-profile.js
export default Ember.Route.extend({
model: function () {
return this.store.find('user-profile');
}
});
When I launch my application, Ember is telling me that profile route doesn't exist, even though I defined the path:
Uncaught Error: Assertion Failed: Error: Assertion Failed: The URL '/profile' did not match any routes in your application
Do you know what's wrong with my code at this point?
Thanks
I dont use ember appkit but perhaps try with underscore, ie 'user_profile' and rename your file too. Just a shot in the dark.
I would have to guess it is the way that you are designing your router and the namespace.
Typically a barebones Ember app requires:
window.App = Ember.Application.create({
LOG_TRANSITIONS: true,
LOG_TRANSITIONS_INTERNAL: true
});
App.Router.map(function () {
this.resource('user-profile', { path: 'profile'}, function() {
//Some other things...
});
In your example your router is not in the App namespace, or whatever your root object is named (It doesn't have to be 'App'). I would give this a try or maybe post more code if there are other factors I do not see here.
Also, typically you would name your route userProfile. While i dont think the dasherized name is a problem, it doesn't follow Ember naming conventions.
Hope this helps.
I am trying to setup a route with the following:
App.Router.map(function() {
this.route('login');
this.route('mlb.lineups', {path: 'tools/mlb/lineups'}, function() {
this.resource('site', { path: 'site/:site_id' });
});
});
The problem is, the nested resource 'site' route is not being recognized. If I change mlb.lineups to a type resource, that seems to have funky behavior as well. Ideally I have a root level /tools/mlb/lineups and then site specific URLs/resources such as /tools/mlb/lineups/site/1 /tools/mlb/lineups/site/2 etc.
resources/routes can not live under routes.
http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources
What is a nice way to match url for both /url.html and /url.html/ in Angular.js ui-router?
For now, they are separate like this in my code:
$stateProvider
.state("myUrl1", {
url: "/",
resolve: {
init: function() {
console.log("Triggered resolve myUrl1 /");
return true;
}
}
})
.state("myUrl2", {
url: "^",
resolve: {
init: function() {
console.log("Triggered resolve myUrl2");
return true;
}
}
});
I have tried [^/]*} in the doc https://github.com/angular-ui/ui-router/wiki/URL-Routing but no success.
Any pointer?
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in Angular core, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
You are asking about how to implement a URL route using a plugin that is not designed for handling routes in this way. If you are only interested in URL routing, you should use the Angular core $routeProvider.
http://docs.angularjs.org/api/ngRoute
Also, Angular routes don't normally include .html. And, your two example routes /url.html and /url.html/ appear to be semantically the same.
I want to be able to specify a base url for all my routes for development. Some of the devs have machines setup to work out of subdirectories instead of the application sitting at the webroot.
I would like to only define these routes once.
Instead of:
routes: {
"toms-subdirectory/users": "init_users"
}
I would like:
routes: {
"/users": "init_users"
}
and be able to specify a baseurl for that installation so I could easily make it work across installs.
Right now I'm forcing them by defining a route object using bracket syntax to keep the dynamic keys and assigning that to the routes property inside the route. I was wondering if there is a cleaner way.
my_routes = {};
my_routes[window.webroot + '/users'] = 'init_users';
MyRoute = Backbone.Router.extend({ routes: my_routes })
You can use Backbone.history.start like this
Backbone.history.start({
pushState: true,
root: "/public/search/"
});