逻辑模式、软件设计概念
无论您选择使用哪种语言或框架来实现，您都绝对希望根据 components 进行思考。
- 将您的应用程序分成不同的视图（可能每个导航菜单元素都有一个视图）。
- 根据它们所服务的功能类型进一步细分这些视图中的每一个（根据需要）。我喜欢 Bootstrap 面板帮助您将其可视化的方式。
- 开发每个组件并为其命名，例如 ContactList、ContactEdit、ContactView 等。为每个组件开发 HTML 视图和 JavaScript、TypeScript 或其他语言视图模型。请务必使用MVC 逻辑将视图与数据分开，在视图中使用占位符来指示您将在何处填写数据。视图就像模板。
- 使用您的特定语言或框架将它们链接在一起。
这是关于Component-Based Software Architecture and Design 的精彩教程。
Aurelia 组件逻辑
我目前正在使用Aurelia，既然你提到了，我们将以Aurelia框架为例来说明上述原理。最佳做法是创建组件（用于模块化和重用），然后使用 if.bind 属性将它们包含或不包含在 DOM 中。
例子：
<tenant-one if.bind="tenantA"></tenant-one>
<tenant-two if.bind="tenantB"></tenant-two>
或者仅在视图中显示/隐藏每个组件（但将所有组件包含在 DOM 中），您可以使用 show.bind 而不是 if.bind，但这似乎对您的用例没有多大意义。
Aurelia 数据绑定
由于我不知道您实际希望在这里显示什么，所以上面的代码是基于您在问题中的代码 sn-p。但是，对于只有数据会更改的类似视图（如模板），您需要将数据从父级绑定到子级，以便正确显示。在 Aurelia 中，这看起来像这样。
例子：
<tenant-view data.bind="tenantData"></tenant-view>
更复杂的例子：
<tenant-view fname.bind="firstName" lname.bind="lastName" data.bind="tenantData"></tenant-view>
在每个示例中，您需要开发 4 个文件。您将需要具有视图和视图模型的主（父）容器。视图模型将负责检索或访问租户信息，然后将其传递给每个子组件。子组件将拥有自己的视图和视图模型。
例如，TenantView 视图（高度简化）可能是这样的：
<template>
<p><strong>Tenant Name: </strong>${fname} ${lname}</p>
<p><strong>Additional Data: </strong>${data}</p>
<p if.bind="data.rentDue">Tenant's rent is due!</p>
</template>
然后 TenantView 视图模型（同样，高度简化）可能是这样的：
import { bindable, bindingMode } from 'aurelia-framework';
export class TenantView {
@bindable fname;
@bindable lname;
@bindable data;
}
创建此组件后，您可以（可选）将其插入到父视图中，如下所示：
<template>
<h1>Contact View</h1>
<h2>${firstName} ${lastName}</h2>
<tenant-view if.bind="cat == 'tenant'" fname.bind="firstName" lname.bind="lastName" data.bind="contactData"></tenant-view>
<phone-numbers data.bind="contactData"></phone-numbers> <!-- another component -->
<page-footer></page-footer> <!-- another component -->
</template>