6

我正在使用一个 SPA，它将有许多不同的区域，每个区域都有几个页面。我的老板真的不想要几十个视图和视图模型文件夹，每个文件夹都有几个项目。如何将 Durandal 配置为使用以下内容：

/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

我已经查看了有关区域的其他类似问题，但不太知道如何开始。谢谢。

4

2 回答 2

5

您可以拥有任何您想要的文件夹结构。Durandal 不会对您的应用程序强加任何文件夹结构，但它确实具有完全可覆盖的默认约定。

如果您使用的是 Durandals路由器，那么您将需要研究如何配置它以查找模块。有很多方法可以做到这一点，我更喜欢通过覆盖router.autoConvertRouteToModuleId.

如果您不使用路由器插件，那么您将不得不自己管理模块的 uris，这是通过遵循requirejs 的约定并与 durandals组合模块一起使用此约定来完成的。

此外，您可以通过覆盖视图定位器约定来覆盖它如何找到要绑定到您的模块的视图。Durandal 提供了一种非常简单的方式来构建开箱即用的小型应用程序，但是如果您需要构建更大的应用程序，那么建议您创建自己的约定。

于 2013-06-18T23:40:42.220 回答
5

Durandal 2.0 附带的“示例”项目是一个示例，说明如何在无需自定义路由器的情况下完成您想要的。下面的示例来自该项目（并且还显示了如何使用“子”路由器）。请注意调用“makeRelative”和路由配置中的 moduleId 参数是如何结合起来为您提供所需的任何文件夹结构的。

应用程序/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';
        });
    })
};

});

于 2013-09-01T14:37:02.107 回答