Using the ASP.Net Durandal template in Visual Studio. I added the following to the main.js:
router.mapNav('clients');
router.mapNav('client/:id');
These links then both work but I don't want client to be available in the navigation, if I remove that line then the link no longer works. Is there an easy way to set it to be invisible or have I entered my routes in the wrong place?
If you're using Durandal 2.0, you can specify more options for the router navigation, and it looks something like this:
//Durandal 2.0
router.map([
{ route: 'clients', title:'clients', moduleId: 'viewmodels/clients', nav: true},
{ route: 'client/:id', title:'client', moduleId: 'viewmodels/client', nav: false }
]).buildNavigationModel();
If you're using Durandal 1.x, I strongly recommend upgrading to 2.0. There are multiple bug fixes as well as some important architectural changes that will make your life easier in the long run.
if that's not an option, there's a way in Durandal 1.x to prevent the route from appearing in the navigation as well:
//Durandal 1.x
router.mapRoute({ url: 'clients', name: 'clients', moduleId: 'viewmodels/clients', visible: true });
router.mapRoute({ url: 'client/:id', name: 'client', moduleId: 'viewmodels/client', visible: false });
With Durandal 1.x, you'll need to inspect the visible property of each route before adding it to a menu collection. With 2.0, the buildNavigationModel function will do this automatically.
Related
I am using Vue JS 3 and Vue Router. I have a company area of the app that uses a dynamic companyId parameter in the route. Ex. myapp.com/46/tasks where 46 is the companyId. Everything works fine when I navigate around to the different sub areas of the company area. However, if I am displaying a router link on any page, and that router link depends on the companyId parameter, if I try to navigate anywhere outside of the company area, which does not require the companyId, the reactivity of the router-link throws an error and the navigation does not happen. If I'm located at the route referenced above, and I try to navigate to
<router-link v-if="session.availableAccounts.length > 1" :to="{name: 'selectCompany'}">
{{ session.selectedAccount.name }}
</router-link>
Here is the router-link that throws the error: (however this happens on any page, with any router-link that requires parameters from the existing page and I then try to navigate somewhere without passing in the parameters EVEN THOUGH THE PARAMETER IS NOT NEEDED FOR THE ROUTE I AM TRYING TO GO TO)
<router-link
:to="{
name:'users',
query: {
selected: person.id,
area: 'Info'
}
}">
{{ person.name }}
</router-link>
Here is the portion of my router.js file concerning the 2 routes I am trying to move between.
{
path: '/account',
component: Base,
meta: {
authorization: true
},
children: [
{
name: 'newAccount',
path: 'new',
component: NewAccount,
meta: {
authorization: true,
title: 'New Account'
}
},
{
name: 'selectCompany',
path: 'selectAccount',
component: SelectCompany,
meta: {
authorization: true,
title: 'Select Account'
}
},
{
name: 'createCustomer',
path: 'create',
component: NewCustomerAccount,
meta: {
authorization: true,
title: 'Create Account'
}
}
]
},
{
path: '/:companyId',
component: Base,
meta: {
authorization: true,
nav: 'account'
},
children: [
{
name: 'home',
path: 'tasks',
alias: '',
component: TaskManager,
meta: {
title: 'My Tasks'
},
},
...
]
}
This happens no matter what method I use to cause navigating, whether I use a router-link or whether I call router.push() in code. However the error always comes from a router-link. If I hide all router-links on the page the navigation works flawlessly. I tried to recreate this on a smaller scale app and I can't seem to make it happen, which means I am doing something wrong but I can't figure it out. I also can't find any similar issues here, which is typically a good indicator that I'm doing something wrong. There is definitely a work-around, where I can store that companyId in a Vuex store and pass it around in the route, but why should I have to pass in a parameter that is not actually in the route?! I really don't want to go down that route (pun intended) unless I absolutely have to. And I first ran into this problem with a child route of the company which needs a projectId parameter. I had the same issue when navigating away from /[:companyId]/[:projectId]/anywhere to /[:companyId]/anywhere IF and only if there is a router-link displayed on the page that relies on [:projectId], and in that situation I was actually relying on whether or not projectId existed within the route params to control a navigation menu. I developed a work around for that behavior but otherwise passing the projectId into the router push to keep the error from happening would have stopped my nav menu from updating correctly.
Is the problem that I do not explicitly define the dynamic route in the parameter? It seems like explicitly defining it would solve my problem but it also requires me to store that somewhere, effectively duplicating the data. I would rather have the id defined in one place (the route) rather than storing it in the store and the route and having to worry about keeping them in sync with each other. Is there no other way?
Any help is appreciated. Thanks.
As is normally the case when I ask a question I discover the answer while asking it. Just posting in case anyone else runs into this same issue. The solution is just to make sure that you explicitly provide the dynamic param when you declare the router-link. Not sure if I like that it lets you create the link without a warning that the required param has not been declared (while there is a warning if vue-router can't resolve the route).
My revised router-link:
<router-link
:to="{
name:'users',
params: {
companyId: route.params.companyId
},
query: {
selected: person.id,
area: 'Info'
}
}">
{{ person.name }}
</router-link>
Our app is multi-tenant by organisation. A user can switch organisations in the app and the data will be filtered for that organisation. We'd like the navigation model to update the orgId to reflect the change in organisation. How can we dynamically configure the router nav model to update the organisationId? The following config doesn't work, as it requires an href, but I don't want to statically define the orgId:
config.map([
{ route: 'org/:orgId/users'], name: 'users', moduleId: 'users/list', nav: true
]);
The only reason it is required to add an HREF property is because you are attempting to use nav: true and Aurelia doesn't know how to add in an orgId that you haven't told it about. Simply set that to false and loop over the routes to build your own navigation model and this issue goes away.
Good morning, I have my route setup as shown below within Aurelia CLI.
config.map([
{
route: [''],
viewPorts: {
'side': { moduleId: 'side' },
'main': { moduleId: 'main' }
},
title: 'Test',
nav: false,
name: 'Temp'
]);
What I would like to do is based on what I select on my side view, I just want to change the moduleId for main and load that view.
I don't think there's a way to dynamically change the moduleId of a view-port. I see 2 options to solve your proble:
1 - Create another route, changing the moduleId of one of the viewports
2 - Use the layout mechanism and change its content in run time. I recommend you to read http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/10.
I know this is not the answer you were expecting but I hope it helps.
I'm struggling with setting up Durandal to run under an IIS virtual folder, when using PushState :true in the router config.
Works fine when running through say http://localhost:24567
But if I run under http://localhost/testapp (testapp is the virtual folder), the routes don't work, and the route links are being rendered without the virtual folder "testapp"
Is there a way to set a base url either using require.js config or via Durandal router?
Thanks
Ok, feeling a little stupid and should have RTFM!
There is a root option when activating the router, especially for when using push-state.
http://durandaljs.com/documentation/Using-The-Router.html
router.map([
{ route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
{ route: 'flickr', moduleId: 'viewmodels/flickr', nav: true }
]).buildNavigationModel();
return router.activate({ pushState : true ,root:'/MvcApplication1'});
Moral of the story, read the manual more carefully.
Thanks to Yago who has authored a fantastic demo app for Durandal that includes membership/client side authorisation as well as oauth logins,
Durandal Auth
My Durandal application's startup logic in shell.js requires sending the user to one of two possible views depending on some conditional logic. Basically, if certain options have not previously been selected I'll send them to a Setup page, otherwise I'll send them to the normal start page.
Previously, in Durandal 1.x I would just pass a string indicating the starting module when calling activate. But in Durandal 2.x that has been deprecated.
So first, I'm wondering what is the recommended way to do this from the standpoint of the routes array? Should I just register both routes as if neither is the start module (like below) then conditionally add a another route to the array with the default route of ''?
{ route: "setup", moduleId: "setup", title: "Setup", nav: false },
{ route: "Students", moduleId: "students", title: "Students", nav: false }
The second part of my question involves how to handle the need to make a call to a web service as part of my conditional logic for determining which module is the start module. My startup logic involves checking the local storage of the browser, but sometimes I'll also need to make an ajax request to the server to get a bit of information.
My understanding is that router.activate() is a promise. Can I actually just create my own promise and resolve it by calling router.activate() after the ajax call has completed? Or is there another way I'll need to handle that? Sample code for how I was thinking I might handle this:
var deferred = $.Deferred();
//Setup and conditional logic here
var routes = setupRoutes();
$.get('/api/myStartupEndpoint')
.done(function(results) {
//check results and maybe alter routes
deferred.resolve(router.map(routes).activate());
});
return deferred.promise();
Does that make sense? I'm still converting my app over to Durandal 2.0.1 so I haven't been able to try this yet, but regardless of whether it does or not I want to find out what the recommended approach would be in this scenario.
The way I'd do it is this - actually I think it's similar to how you're already thinking, so I hope it makes sense:
In your main.js, set your application root to the same module, no matter the circumstances. Since one of the main features of D2 is child routers, I'd suggest using the module name "root" for your application root, as it makes it easier to distinguish from "shell" modules (which I use for setting up child routers):
app.start().then(function () {
app.setRoot("root", "entrance");
});
In your root module, setup the routes as you have described:
{ route: "setup", moduleId: "setup", title: "Setup", nav: false },
{ route: "students", moduleId: "students", title: "Students", nav: false }
When your root module activates, check if the user has been setup or not. Use the result of that check to work out if you want the user to be sent to the setup page, or the students page. Note however that you must activate your router before redirecting; you can use $.when to help you here:
var checkUserSetup = function () {
var deferred = $.Deferred();
// check local storage, fire off ajax request, etc.
// resolve the deferred once you know if the user is setup or not
deferred.resolve(false);
return deferred.promise();
};
root.activate = function() {
mapRoutes();
var deferred = $.Deferred();
$.when(checkUserSetup(), router.activate()).done(function(isUserSetup) {
if (isUserSetup) {
router.navigate("students");
} else {
router.navigate("setup");
}
deferred.resolve();
});
return deferred.promise();
}
Hopefully this also answers the second part of your question; but just in case - yes, you can return a promise from the activate method, and durandal will "block" until you've resolved that promise. However, note that the router's activate method also returns a promise - so your code won't quite work. You're resolving your deferred with another deferred; you'd need to do something more like this:
root.activate = function() {
var deferred = $.Deferred();
//Setup and conditional logic here
var routes = setupRoutes();
$.get('/api/myStartupEndpoint')
.done(function(results) {
//check results and maybe alter routes
//don't resolve the deferred until the router has completed activation
router.map(routes).activate().done(deferred.resolve);
});
return deferred.promise();
}
Hope that helps.