Question

在Chat-Demo中，有一种语法将代码（https://donejs.com/Guide.html#switch-between-pages）分为两个块：一个用于<chat-messages/>，以便在page='chat'时加载，另一个用于{{1 }}。

这两个块非常相似。

想象一下，如果没有两个，而是说有十个或更多不同的组件可以通过这种方式加载（例如，一个大的选项菜单，每个菜单都链接到一个不同的页面/组件）。

我是否需要创建与菜单中的选项数量一样多的“ if”块，或者还有另一种更紧凑的方式来做到这一点？

Answer 1

多个“ if”块是一种快速启动并运行应用程序的简便方法。但是，当您的应用开始增长时，它不能很好地工作。我在应用程序中使用了一种非常有效的技术。我已经通过自定义上传了donejs聊天演示的版本。我建议您先将其拉下再阅读：

https://github.com/DesignByOnyx/donejs-with-route-config

一共有3次提交，因此您可以查看该过程每个步骤之间的更改。最重要的部分在第三次提交中：

未经修改即可生成DoneJS聊天应用程序：e0398af4c23207d527c054f1fb1ea65b419119a0
添加home.component和messages组件：56c2202c117049f67ff7dc52b054ad30cc5b71eb
添加路线配置，导航组件，动态加载，捆绑：4a924693bfd8a3469d69a6ccb5abe8675724e8a9

提交＃3的说明

最后一次提交包含所有魔术（以及我上一个项目中许多小时的工作结果）。您应该先查看src/route-config.js文件，因为它包含有关该应用程序的路由和动态模块的所有信息。您应该了解几件事：

“模块”对象是url友好名称到应加载的模块的简单映射。您可以根据需要重命名这些名称。

注意：对于每个项目，在构建过程中都会生成一个单独的捆绑包。

const modules = {
  'home': '~/home.component',
  'messages': '~/messages/messages',
};

主要出口是将为您的应用注册的一系列路由：

module.exports = [
  { route: '/', nav: 'Home', data: { moduleId: modules.home } },
  { route: '/chat', nav: 'Chat Messages', data: { moduleId: modules.messages } },
];

对于数组中的每个项目，都有3个属性：

route ：参数化的路由-您可以按照in the docs的说明为动态路由添加诸如/user/{userId}之类的参数。
data ：路由的默认数据。只要URL与路由匹配，就会将默认数据合并到应用程序视图模型中。 See the moduleId property on the app viewmodel。
nav （可选）：如果指定，则该值将用于在主navigation component中生成链接。

DoneJS-动态加载程序

1 个答案:

提交＃3的说明