kickout.js-使用条件逻辑组成HTML视图

在我的多租户应用中,我有以下许多实例:

<!-- 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,但这会给我的viewmodel带来更多的复杂性,并弄乱了我的解决方案占用空间(这对于我快速导航很重要)在开发期间).

我正在使用durandal和淘汰赛,但是给Aurelia加了标签,因为我将在某个时候进行迁移,并认为这更多的是模式问题,而不是特定的技术问题.

最佳答案
逻辑模式,软件设计概念

无论您选择使用哪种语言或框架来实施,您都绝对希望以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数据绑定

由于我不知道您实际希望在此处显示什么,因此以上代码基于问题中的代码段.但是,对于仅数据将发生更改的类似视图(如模板),您将数据从父级绑定到子级,以便可以正确显示.在奥雷利亚,这看起来像这样.

例:

<tenant-view data.bind="tenantData"></tenant-view>

更复杂的示例:

<tenant-view fname.bind="firstName" lname.bind="lastName" data.bind="tenantData"></tenant-view>

在每个示例中,您将需要开发4个文件.您将需要具有视图和viewmodel的主(父)容器.视图模型将负责检索或访问租户信息,然后将其传递给每个子组件.子组件将具有自己的视图和视图模型.

例如,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>

转载注明原文:kickout.js-使用条件逻辑组成HTML视图 - 代码日志