Question

在我的多租户应用中，我有以下几个实例：

<!-- ko if: tenantA() -->
<div>Tenant One snippet</div>
<!-- /ko -->
<!-- ko if: tenantB() -->
<div>Tenant Two snippet</div>
<!-- /ko -->
<!-- ko if: userTypeA() -->
<div>User type A snippet</div>
<!-- /ko -->
<!-- ko if: userTypeB() -->
<div>User type B snippet</div>
<!-- /ko -->

这是一个过于简化的示例，但您可以了解到 - 大型视图的许多组件都是基于来自各种数据点的业务逻辑组成的。

这样做的好处是我有一个视图，解决方案占用空间更易于管理，但它有点混乱。还有哪些替代模式？

我正在考虑将条件中显示的任何内容和所有内容分成html模板并基于js viewmodel中的逻辑渲染html，但这会在我的视图模型中引入更多复杂性并混淆我的解决方案占用空间（这对我很重要）用于在开发期间快速导航。

我正在使用durandal和knockout但标记为Aurelia，因为我会在某个时候迁移并认为这更像是一个模式问题，而不是特定的技术问题。

Answer 1

逻辑模式，软件设计概念

无论您选择使用哪种语言或框架进行实施，您都肯定想用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数据绑定

由于我不知道您希望在此处显示的内容，因此上述代码基于问题中的代码段。但是，对于只有数据会发生变化的类似视图（如模板），您可以将数据从父级绑定到子级，以便可以正确显示。在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>

Answer 2

一旦您的应用开始变大，HTML模板总是会变得混乱且难以维护。

我建议你将HTML分解为多个组件。维护起来会更容易，最重要的是你最终会重复使用所有这些组件。

最好的例子之一是JSX，它最适合React.js，你可以在JS中编写HTML。因此，您可以将应用程序划分为可维护的组件。给JSX一个尝试它真的让你的生活更容易作为字体端开发人员。

使用条件逻辑编写HTML视图

2 个答案: