I am trying to configure Durandal child routing. I have a public section for witch the parent router is responsible:
//main router
return router.map(config.publicRoutes)
.buildNavigationModel()
.mapUnknownRoutes('account/login', '#login/')
.activate();
//public routes
[{ route: 'login', title: 'Login', moduleId: 'account/login', nav: false, hash: '#login/' },
{ route: 'register', title: 'Register', moduleId: 'account/register', nav: false, hash: '#register/' },
{ route: 'reset-password', title: 'Reset password', moduleId: 'account/reset-password', nav: false, hash: '#reset-password/' },
{ route: 'private*details', moduleId: 'private/private-shell', title: 'Application', nav: true, hash: '#private/' }
];
Then a child router should be responsible for the private section. I am mapping the routes for the child router after the user has logged in. Depending on the user type (admin, user) I am activating the child router with the appropriate routes:
//initializing the router from the login view
var promise = Q.all([private_shell.initRoutes(isAdmin || true)]);
return promise.then(navigate("#private/silos"));
// child router in private-shell
var privateRouter = router.createChildRouter();
var routes = [];
//method to initialize the proper routes after login
var initRoutes = function (isAdmin) {
privateRouter.reset().makeRelative({
moduleId: 'viewmodels/private/',
fromParent: true
});
console.log(privateRouter);
return privateRouter.map(isAdmin ? config.adminRoutes : config.userRoutes).buildNavigationModel();
};
The first time when the router is initialized all works fine but if I return to the main router(login view) and another login is performed the child router adds the relative moduleId twice.
After the first login the routes have the moduleId ´viewmodels/private/route´, which is the right one, but second time the login initializes the child router the routes have the moduleId ´viewmodels/private/viewmodels/private/route´.
GET http://localhost:7777/App/viewmodels/private/viewmodels/private/silos.js 404 (Not Found)
When it should be:
GET http://localhost:7777/App/viewmodels/private/silos.js
I wasn't able to identify what might cause this. Any help?
Can you try specifying the parent route in a route property on the makeRelative settings object?
Perhaps also try making the reset call explicit.
Like this:
privateRouter.reset();
privateRouter.makeRelative({
moduleId: 'viewmodels/private/',
fromParent: true,
route: 'viewmodels/private'
});
Related
The main router's pipeline of my application redirects to login page if a user is not logged in.
It works fine for most pages, but when said page holds itself a child router, the logic does not seem to hit the main router's pipeline, preventing redirection (as well as not rendering the page).
main router:
configureRouter (rc: RouterConfiguration, router: Router) {
this.router = router;
rc.addAuthorizeStep(this.requireAuth);
const auth = { authenticated: true, needsCurrentOrg: true };
const loginRoute = {
route: 'login/:token?',
name: 'login',
moduleId: PLATFORM.moduleName('views/login/login'),
};
rc.map([
{
route: [ROOT_PAGE, DASHBOARD_PAGE],
name: DASHBOARD_PAGE,
moduleId: PLATFORM.moduleName('views/dashboard/dashboard'),
settings: auth
},
{
route: CREDENTIALS_PAGE,
name: CREDENTIALS_PAGE,
moduleId: PLATFORM.moduleName('views/credentials/credentials-root'),
settings: auth
})]
}
credentials router:
configureRouter (rc: RouterConfiguration) {
rc.map([
{
route: '',
name: 'credentials-list',
moduleId: PLATFORM.moduleName('./credentials-grid'),
}
]);
}
So if I hit /#/dashboard without being logged in, I get redirected to /login, but nothing happens if I hit /#/credentials: blank page, no redirection. I put a debugger in the requireAuth middle-ware code, and in the first case it does step in, in the second case it does not go through
Finally identified the issue, for some reasons it looks like the LoadRouteStep pipeline step (internal to the AppRouter) tried to load the ViewModel of the subrouter target.
Since this ViewModel had some code in the constructor, that code was failing, creating an error and stopping the pipeline - never reaching the redirection.
The fix was to move that constructor code into an activate function for the ViewModel.
My default route has child views, can I set a Splat route as Default route in Durandal 2.0 if yes how I tried something like below but it fails , basically I want to implement a childrouter in my default view how can I do this..
define(['plugins/router'], function (router) {
return {
router: router,
activate: function () {
return router.map([
{ route: 'knockout-samples*details', moduleId: 'ko/index',title: 'Knockout Samples', nav: true, hash: '#knockout-samples' }
]).buildNavigationModel()
.activate();
}
};
});
If I understand you correctly then yes - you can have a splat as your default route. You would do something like this in your root shell:
router.map({
moduleId: "child/shell",
route: "*details"
});
And then in your child's view model:
var childRouter = rootRouter
.createChildRouter()
.makeRelative({ moduleId: "child" });
// Uses "child/defaultPage" as the view model, and "#/" as the route
childRouter.map({
moduleId: "defaultPage",
route: ""
});
Hope that helps.
I am trying to initialize a child router to build sub navigation for the customer section of my application.
The url i am trying to configure is:
#customer/1/orders/1
I defined a route to get to the customer view in my shell.js
define(['plugins/router', 'durandal/app'], function (router, app) {
return {
router: router,
activate: function () {
router.map([
{ route: 'customer/:id*splat', moduleId: 'customer/customer' }
]).buildNavigationModel();
return router.activate();
}
};
});
I created a customer view that contains sub navigation for the customer section. The navigation will use the customer id that was in the route. This view doesnt really do anything except show customer sub-navigation. I created a child router in this view.
define(['plugins/router', 'knockout'], function (router, ko) {
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'customer',
fromParent: true
}).map([
{ route: 'orders/:orderId', moduleId: 'orders' }
]).buildNavigationModel();
var activate = function(id) {
};
return {
router: childRouter,
activate: activate
};
});
My problem is that I can't seem to get the routing to work when I have a parameter in my parent router. The customer view gets routed to but the orders view doesn't. I will end up having more sub views under the customer section.
I managed to get this working just fine with my parameterized route. My childRouter is second level and I'm also using {pushState: true} so have no #(hashes) in my hashes :) so you'll need to add some if you're not using pushState. It looks like this:
Folder structure looks like this:
app
|
|--users
|
|--profile
| |
| |--activity.html
| |--activity.js
| |--articles.html
| |--articles.js
| |--tags.html
| |--tags.js
|
|--index.html
|--indexjs
|--profile.html
|--profile.js
Splat route in the top level router:
{ route: 'users/:userId/:slug*details', title: 'User', moduleId: 'users/profile', nav: false }
profile.js looks like this:
define(['plugins/router', 'plugins/http', 'durandal/app', 'jquery', 'knockout', 'timeago', 'bootstrap'], function (router, http, app, $, ko) {
var childRouter = router.createChildRouter();
var userProfile = function(user) {
$.extend(this, user);
};
var userProfileViewModel = function () {
var self = this;
self.userProfile = ko.observable();
self.router = childRouter;
self.activate = function () {
var userId = router.activeInstruction().params[0];
var slug = router.activeInstruction().params[1];
var userRoute = '/users/' + userId + '/' + slug;
self.router.reset();
self.router
.makeRelative({
moduleId: 'users/profile',
route: 'users/:userId/:slug'
})
.map([
{ route: '', moduleId: 'articles', title: 'articles', nav: false, hash: userRoute + '/articles' },
{ route: 'articles', moduleId: 'articles', title: 'articles', nav: true, hash: userRoute + '/articles' },
{ route: 'tags', moduleId: 'tags', title: 'tags', nav: true, hash: userRoute + '/tags' },
{ route: 'activity', moduleId: 'activity', title: 'activity', nav: true, hash: userRoute + '/activity' }
]).buildNavigationModel();
return self.loadUserProfile(userId);
};
self.loadUserProfile = function(userId) {
var url = '/api/users/profile/' + userId;
return http.jsonp(url).then(function(response) {
self.userProfile(new userProfile(response));
});
};
};
return userProfileViewModel;
});
Note also that I'm returning a constructor function here, not an object since in my case I don't want a singleton for this view.
I'd keep it simple and start with some static routes at the top level
router.map([
{ route: 'customer/:id', moduleId: 'customer/customer' },
{ route: 'customer/:id/orders/:id', moduleId: 'customer/orders' },
{ route: 'customer/:id/xxx/:id', moduleId: 'customer/xxx' }
]).buildNavigationModel();
In order to have full life cycle control for each customer (order, xxx, etc.) instance return a constructor function instead of a singleton.
define(['knockout'], function (ko) {
var ctor = function(){
...
};
//this runs on every instance
ctor.prototype.activate = function(id) { // or function(orderId, xxxID)
};
return ctor;
});
More info singleton vs constructor: http://durandaljs.com/documentation/Creating-A-Module.html
I'm using Durandal 2.0. I have a search view and want to pass the selected item to a detail view. I know how to pass the Id, but since the search in this case has the whole object, I"d like to pass the object when navigating. I thought I could use a route with a splat, but I'm not sure how to send it when I activate the route.
The route is mapped as:
router.map([
{ route: '', title: 'Search', moduleId: 'viewmodels/search', nav: true },
{ route: 'create', title: 'Add', moduleId: 'viewmodels/create', nav: true },
{ route: 'details*movie', title: 'Details', moduleId: 'viewmodels/details', nav: false },
{ route: 'edit', title: 'Edit', moduleId: 'viewmodels/edit', nav: false }
]).buildNavigationModel();
The search view model navigates like this:
var openmovie = function (data) {
router.navigate('details*'+ ??what do I do here??);
};
And the detail view model has an activate function:
var activate = function(data) {
???what will the data be???
return true;
};
What you are trying to do is not possible using the navigation of the router. When you navigate, the router internally changes the URL so the composition lifecycle is triggered. So basically in order to make this work you would need to add all the object in the URL query string, which is something that could be pretty ugly..
Take a look at this very completed answer by Jonathan Curtis in the DurandalJS Google Groups on how to aproach this scenario.
The three approaches suggested are:
Parent-Child
EventAggregator
Shared Context (or model)
We are trying to use route parameters alongside splat routes. This is the scenario.
We have a navigation menu, and then as part of one of the options, we have a wizard. When we go to the wizard, we want to pass the identifier for the object we are working on. At the same, the wizard has steps and we want to handle those at the child level router, passing also the step as part of the route (*details).
The splat route looks like this:
{ route: 'offer/:offerId/*details', moduleId: 'offerbuilder/index', title: 'Offer Builder' }
The children routes look like this:
[
{ route: 'parameters', moduleId: 'parameters', title: 'Parameters', nav: true },
{ route: 'cart', moduleId: 'cart', title: 'Cart', nav: true },
{ route: 'workspaces', moduleId: 'workspaces', title: 'Workspaces', nav: true }
]
We've got the router and child router to resolve the routes appropriately, but the issue we are having is that the hashes for the children routes don't replace the passed parameter value, but use the original pattern. In other words, this do work:
http://oursite/main/#offer/123456789/parameters
but the hashes generated as part of the wizard steps are:
http://oursite/main/#offer/:offerId/parameters
My question is, do splat routes support the inclusion of parameters? If not, what would be the suggested workaround?
This is currently an issue with the child router, which is discussed here.
The solution is to pull the parentId and manually construct the hashes for the child router.
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'employees/doctors',
route: 'doctors/:id',
});
return {
router: childRouter,
activate: function() {
var doctorID = router.activeInstruction().params;
childRouter.map([
{ route: '', moduleId: 'patients/index', hash: '#employees/doctors' + doctorID(), nav: true },
{ route: 'schedule', moduleId: 'schedule/index', hash: '#employees/doctors/' + doctorID() + '/schedule', nav: true }
]).buildNavigationModel();
}
};