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

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>

（my-way view-model：）

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>）比使用mega-element { display: block; ... }尝试获得类似结果要容易得多。不知道你将如何实现它。

CSS ：使用css选择器定位自定义元素比使用特定的compose元素实例更容易。 <Window x:Class="WpfApplication5.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApplication5" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Grid> <TabControl> <TabControl.Items> <TabItem> <TabItem.Header>tabItem1</TabItem.Header> <TabItem.Content> <ScrollViewer HorizontalScrollBarVisibility="Disabled"> <WrapPanel> <Image Source="RentgenogramOfWrist.jpg" Width="500"></Image> <Button Width="300" Height="300"/> </WrapPanel> </ScrollViewer> </TabItem.Content> </TabItem> <TabItem> <TabItem.Header>tabItem2</TabItem.Header> <TabItem.Content> <ScrollViewer HorizontalScrollBarVisibility="Disabled"> <WrapPanel> <Image Source="RentgenogramOfWrist.jpg" Width="500"></Image> <Button Width="300" Height="300"/> </WrapPanel> </ScrollViewer> </TabItem.Content> </TabItem> </TabControl.Items> </TabControl> </Grid>

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

Answer 2

我个人不会强迫自己只使用某种方法。大多数框架都受到这样一个事实的影响，即他们试图说服你只有一种胜利的范例。但事实并非如此，因为每个项目，甚至在项目内部，每个要求都可能完全不同。

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

仅使用自定义元素方法非常棒，因为它易于阅读并且易于实现某种静态页面结构。另一方面，如果您的页面需要大量的动态组合，那么顾名思义的组合方法就是要走的路。

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

反对撰写的一个论点可以是使用自定义属性。例如。如果您使用aurelia-i18n并希望使用属性转换方法，那么最好使用自定义元素语法。所以当你看到它的用例时，它就是真的。

编辑：

如果我们真的想深入了解细节，那么自定义元素方法的最佳理由是撰写本身实际上是nothing more than a custom element。

Answer 3

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

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

Answer 4

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

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

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

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

4 个答案:

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