Come configurare Durandal.js per avere più aree con viste e modelli di vista nella stessa cartella?

Question

Sto lavorando con una SPA che avrà molte aree diverse, ognuna con diverse pagine. Il mio capo non vuole davvero dozzine di viste e cartelle di modellini di immagini con alcuni elementi in ognuno di essi. Come faccio a configurare Durandal usare qualcosa di simile:

/App/Areas/Login/ 
       login.html 
       login.js 
/App/Areas/Here/ 
       subpage1.html 
       subpage1.js 
       subpage2.html 
       subpage2.js 
       subpage3.html 
       subpage3.js 
/App/Areas/There/ 
       subpage1.html 
       subpage1.js 
       subpage2.html 
       subpage2.js 
       subpage3.html 
       subpage3.js 

Ho guardato in altri simili domande sulle aree, ma non so bene come iniziare. Grazie.

Answer 1

Puoi avere qualsiasi struttura di cartelle che il tuo cuore desidera. Durandal non impone alcuna struttura di cartelle sulla tua applicazione ma ha una convenzione predefinita che è completamente sostituibile.

Se si utilizza Durandals router, è necessario esaminare come configurarlo per trovare i moduli. Ci sono molti modi per farlo, preferisco creare la mia convenzione ignorando lo router.autoConvertRouteToModuleId.

Se non si utilizza il plugin router allora si dovrà gestire gli URI per i moduli stessi e questo è fatto seguendo requirejs' convenzione e l'utilizzo di questa convenzione lungo w/durandals modulo composition.

Inoltre, è possibile sovrascrivere il modo in cui trova le viste da associare ai moduli ignorando la convenzione viewlocators. Durandal fornisce un modo molto semplicistico di strutturare le piccole applicazioni immediatamente, ma se è necessario creare applicazioni più grandi, si consiglia di creare le proprie convenzioni.

Answer 2

Il progetto "campioni" fornito con Durandal 2.0 è un esempio di come realizzare ciò che si desidera senza dover personalizzare il router. L'esempio che segue è tratto da quel progetto (e mostra anche come usare un router "figlio"). Osserva come i parametri moduleId nella chiamata a makeRelative e route config si combinano per darti la struttura di cartelle che desideri.

app/ko/index.js

define(['plugins/router', 'knockout'], function(router, ko) { 
var childRouter = router.createChildRouter() 
    .makeRelative({ 
     moduleId:'ko', 
     fromParent:true 
    }).map([ 
     { route: '',    moduleId: 'helloWorld/index',  title: 'Hello World',   type: 'intro' }, 
     { route: 'helloWorld',  moduleId: 'helloWorld/index',  title: 'Hello World',   type: 'intro',  nav: 5}, 
     { route: 'clickCounter', moduleId: 'clickCounter/index',  title: 'Click Counter',   type: 'intro',  nav: 4}, 
     { route: 'simpleList',  moduleId: 'simpleList/index',  title: 'Simple List',   type: 'intro',  nav: 3 }, 
     { route: 'betterList',  moduleId: 'betterList/index',  title: 'Better List',   type: 'intro',  nav: 2}, 
     { route: 'controlTypes', moduleId: 'controlTypes/index',  title: 'Control Types',   type: 'intro',  nav: 1 }, 
     { route: 'collections',  moduleId: 'collections/index',  title: 'Collection',   type: 'intro' ,  nav: 99 }, 
     { route: 'pagedGrid',  moduleId: 'pagedGrid/index',  title: 'Paged Grid',   type: 'intro',  nav: 98 }, 
     { route: 'animatedTrans', moduleId: 'animatedTrans/index', title: 'Animated Transition', type: 'intro',  nav: true }, 
     { route: 'contactsEditor', moduleId: 'contactsEditor/index', title: 'Contacts Editor',  type: 'detailed', nav: true }, 
     { route: 'gridEditor',  moduleId: 'gridEditor/index',  title: 'Grid Editor',   type: 'detailed', nav: true }, 
     { route: 'shoppingCart', moduleId: 'shoppingCart/index',  title: 'Shopping Cart',   type: 'detailed', nav: true }, 
     { route: 'twitterClient', moduleId: 'twitterClient/index', title: 'Twitter Client',  type: 'detailed', nav: 1} 
    ]) 
    .buildNavigationModel(); 

return { 
    router: childRouter, 
    introSamples: ko.computed(function() { 
     return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) { 
      return route.type == 'intro'; 
     }); 
    }), 
    detailedSamples: ko.computed(function() { 
     return ko.utils.arrayFilter(childRouter.navigationModel(), function(route) { 
      return route.type == 'detailed'; 
     }); 
    }) 
}; 

});