0

在 Chat-Demo 中，有一种语法，其中代码 ( https://donejs.com/Guide.html#switch-between-pages ) 分为两个块：一个用于<chat-messages/>随时加载page='chat'，另一个<chat-home/>用于主页。

这两个块非常相似。

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

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

4

1 回答 1

0

多个“if”块是快速启动和运行应用程序的简单方法。但是，当您的应用程序开始增长时，它就无法正常工作。我在应用程序中使用了一种非常有效的技术。我已经上传了一个带有我的自定义的 donejs 聊天演示版本。我建议您在进一步阅读之前将其拉下：

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

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

  1. 无需修改即可生成 DoneJS 聊天应用程序：e0398af4c23207d527c054f1fb1ea65b419119a0

  2. 添加 home.component 和 messages 组件：56c2202c117049f67ff7dc52b054ad30cc5b71eb

  3. 添加route-config，导航组件，动态加载，捆绑：4a924693bfd8a3469d69a6ccb5abe8675724e8a9

提交 #3 的描述

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

“modules”对象是对 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 个属性：

  1. route：参数化路由 - 您可以包含文档/user/{userId}中描述的动态路由等参数。
  2. data：路由的默认数据。每当 URL 匹配路由时，默认数据将被合并到应用程序视图模型中。查看moduleId应用程序 viewmodel 上的属性。
  3. nav（可选）：如果指定，该值将用于在主导航组件中生成链接。
于 2018-09-17T01:33:10.820 回答