使用<compose view-model ="./ my-element">和<my-element>之间有什么区别？有哪些情况更合适？

Question

我和队友在过去的四个月里一直在Aurelia建立一个应用程序,他和我一直在以这两种不同的方式创建和使用组件.我希望有一些一致性并将所有内容改为两种风格中的一种,但我不知道哪种风格更适合我们的需求.

我选择使用<compose>因为对我来说它感觉更干净,适合我遇到的每一个需求,但如果使用自定义元素客观上更好,我想切换到那个.

例如:

(他的观点模型:)

import { bindable, bindingMode } from 'aurelia-framework';

export class HisWay {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) data;
}

(他的观点:)

<require from="./his-way"></require>
<his-way data.two-way="myModel" containerless></project-name>

(我的观点模型:)

export class MyWay {
  activate(model) {
    this.model = model;
  }
}

(我的方式:)

<compose view-model="./my-way" model.bind="myModel" containerless></compose>

我是否需要转换,如果没有,我可以用什么理由来说服他使用我一直使用的相同风格？

Answer 1

尽可能使用自定义元素方法.

撰写目标动态方案.如果<compose>元素view和view-model属性值是静态的(不是数据绑定的),您可能应该使用自定义元素,原因如下所述.

可移植性:自定义元素更具可移植性,因为它们具有更高的封装程度.自定义元素的模板无法访问外部范围,所有数据都必须通过@bindable属性传递.这与<compose>允许访问外部范围形成对比,使得很容易变得草率并且假设将使用组合视图的环境.

功能:自定义元素具有比元素更多的功能<compose>.模板部件/插槽(包含),可绑定属性,通过"全球化"的能力globalResources等等.

重用:当一个团队封装在一个自定义元素中并通过全局化时,团队可以更轻松地重用它globalResources.团队可以简单地写<mega-widget ...></mega-widget>,而不是不得不记住的相对路径mega-widget.html和mega-widget.js写一个有效的<compose view="..." view-model="..."></compose>表达.

更合适:任何创建数据输入小部件的用例确实值得定制元素.使用货币自定义元素要容易<currency value.bind="unitCost"></currency>得多- 例如:尝试用它来获得类似的结果<compose>.不确定你将如何实现它.

CSS:使用css选择器而不是特定的compose元素实例来定位自定义元素更容易. mega-element { display: block; ... }

https://www.danyow.net/aurelia-custom-element-vs-compose/