CODEWITHSUNDEEP
single-page-applicationdurandal
Jonas Stawski
Jonas Stawski

Reputation: 6752

How to setup durandaljs with Areas?

For the life of me I can't make durandaljs work with Areas. I'm developing an application with multiple mini SPAs, but I'm not sure how to set up durandaljs to work with it. I wasn't able to find anything online that can drive me in the right direction. The only similar question I found was this one, which is very vague.

My goal is to separate each SPA within it's own folder like so:

App
--areas
----area1
------viewmodels
------views
----area2
------viewmodels
------views

The router doesn't seem to have the concept of areas and no matter how I map the routes I get 404s when I call router.activate('page1'); after mapping with router.mapRoute('page1'); durandal is trying to get /App/viewmodels/page1.js.

Changing it to:

router.mapRoute('areas/area1/viewmodels/page1');
router.activate('areas/area1/viewmodels/page1');

results in another 404 fetching App/viewmodels/areas/area1/viewmodels/page1.js I've also tried many other combinations which I no longer remember and can't seem to get it to work.

Can someone please post a working example of how to setup durandaljs with the router plugin and multiple mini SPAs (areas)? A link to an article document would also suffice.

Upvotes: 2

Views: 769

Answers (2)

Joseph Gabriel
Joseph Gabriel

Reputation: 8510

You can use viewLocator.useConvention - maybe something like this:

viewLocator.useConvention(
                    "areas/area1/viewmodels",
                    "areas/area1/views",
                    "areas/area1/templates"
);

One good thing to realize is that useConvention() works in conjunction with any existing require.config paths setting. In other words, if you set the require.config so that "viewModels" and "views" are mapped to the right folders, then all is well.

For example, the code snippet above is functionally equivalent to:

window.require.config({
    paths: {
        "viewModels": "areas/area1/viewmodels",
        "views": "areas/area1/views",
        "templates": "areas/area1/templates"
    }

viewLocator.useConvention("viewmodels", "views", "templates");

Upvotes: 4

jvrdelafuente
jvrdelafuente

Reputation: 2002

I a similar structure implemented in my application. I think that you have to put this piece of code, to do the viewLocator works properly.

viewLocator.useConvention(); //You can do that in you main.js

You can see more information here: http://durandaljs.com/documentation/View-Locator/

Also I recommed you to look the code of viewLocator.js, especially, the code of useConventionMethod.

Other possibility is to override the method convertModuleIdToViewId, to make it works as you want. But I think that using useConvention methos is enought.

Upvotes: 1

Related Questions