Jak skonfigurować plik Durandal.js, aby miał wiele obszarów z widokami i widokami w tym samym folderze?

Question

Pracuję w SPA, które będzie miało wiele różnych obszarów, z których każda będzie zawierała kilka stron. Mój szef naprawdę nie chce mieć dziesiątek widoków i folderów viewmodels z kilkoma elementami w każdym. Jak skonfigurować Durandal użyć czegoś takiego:

/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 

Szukałem w innych podobnych pytań dotyczących obszarów, ale nie bardzo wiem jak zacząć. Dzięki.

Answer 1

Możesz mieć dowolną strukturę folderów, której pragnie twoje serce. Durandal nie narzuca żadnej struktury folderów w aplikacji, ale ma domyślną konwencję, która jest całkowicie zastępowalna.

Jeśli używasz Durandals router, będziesz chciał sprawdzić, jak skonfigurować go w celu znalezienia modułów. Jest wiele sposobów na zrobienie tego, wolę stworzyć własną konwencję, przesłoniwszy router.autoConvertRouteToModuleId.

Jeśli nie korzystasz z wtyczki routera, musisz samodzielnie zarządzać zasobami dla swoich modułów i postępuj zgodnie z konwencją requirejs' i korzystaj z tej konwencji razem z modułem durandals composition.

Możesz także zastąpić sposób, w jaki widoki będą wiązały się z Twoimi modułami, zastępując konwencję viewlocators. Durandal oferuje bardzo uproszczony sposób tworzenia małych aplikacji natychmiast po wyjęciu z pudełka, ale jeśli potrzebujesz zbudować większe aplikacje, zaleca się tworzenie własnych konwencji.

Answer 2

Projekt "próbki" dostarczany z Durandal 2.0 jest przykładem tego, jak osiągnąć to, czego pragniesz, bez konieczności dostosowywania routera. Poniższy przykład pochodzi z tego projektu (a także pokazuje, jak używać routera "podrzędnego"). Zwróć uwagę, w jaki sposób parametry moduleId w wywołaniu funkcji "makeRelative" i konfiguracja trasy łączą się, aby uzyskać dowolną wybraną strukturę folderów.

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'; 
     }); 
    }) 
}; 

});