6

在过去的四个月里，我和一个队友一直在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>

我需要改变吗？如果不需要，我可以用什么理由说服他使用我一直使用的相同风格？

4

4 回答 4

9

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

撰写目标动态场景。如果您的<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/

于 2016-08-12T14:28:57.250 回答
1

答案是不。对于提供的示例等情况，您无需切换。Compose 元素（即组件）和自定义元素解决了不同的问题。前者允许您将视图或视图和视图模型对组合到另一个视图中。默认行为根据名称匹配视图和视图模型，但我知道您实际上每次都可以绑定不同的视图模型（这可能会在 for 循环中提供一些有趣的用途。）当我想分解更大的视图时，我会使用组件分成更易于管理的块。我还将在我希望代码重用的地方使用它们，但我不希望将它从一种用途定制到另一种用途，例如页脚、导航。

我理解的自定义元素基本上是 WebComponents，一种利用 Shadow DOM 的不断发展的 Web 标准。（您可以在下面的链接中阅读更多相关信息。）虽然相似，但它们比简单的组件具有更多的功能，而 IMO 具有更大的重用能力。与组件不同，自定义元素可以具有一系列绑定属性，因此当您在视图中使用它时，您可以更好地控制它。你队友的例子并没有真正做到公正。有人可能会争辩说，在这种情况下，组件会是更好的选择。

于 2016-08-12T02:36:27.873 回答
1

元素和自定义元素之间要了解的另一个重要方面compose是调用的生命周期。

使用compose元素将调用activate(params)导航生命周期的 ，以及通常的组件生命周期 ( created, bind, attached, detached, unbind)。

这可能很有用，而且有细微差别。

于 2017-05-24T14:42:39.687 回答
1

我个人不会强迫自己只使用某种方法。大多数框架都受到这样一个事实的困扰，即它们试图让你相信只有一个成功的范式。但这不是真的，因为每个项目，甚至在项目内部，每个需求都可能完全不同。

因此，在查看是否使用自定义元素名称与 compose 渲染组件时，首先要问自己要实现的设计目标是什么。在我看来，统一是不够的。

仅使用自定义元素方法很棒，因为它易于阅读并且易于使用一种静态页面结构。另一方面，如果您的页面需要大量动态组合，则顾名思义，组合方法是可行的方法。

所以我倾向于同意 compose 更好，或者说更灵活，但同时也有点冗长。

反对 compose 的一个论点是使用自定义属性。例如，如果您使用 aurelia-i18n 并希望使用属性翻译方法，则最好使用自定义元素语法。因此，正如您所看到的，它实际上都是关于用例的。

编辑：

如果我们真的想深入了解细节，自定义元素方法的最佳论据是 compose 本身实际上只不过是一个自定义元素。

于 2016-08-11T13:55:23.720 回答