Templating: Custom Elements Basics-模板：定制元素基础

原文链接：http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-elements/1

对Aurelia模板引擎中定制元素的功能性基础的综述。定制元素可以在Aurelia应用程序中被添加为定制组件。

介绍：

定制元素是一个Aurelia应用开发者为组件化自己的应用程序而使用的基础工具。

HTML Only Custom Element - HTML自定义元素

用HTML文件创建一个Aurelia视图模板，然后在另一个Aurelia视图模板中使用，这是创建一个Aurelia自定义元素的最简单的方法。使用可以被重复利用但是对视图模型逻辑没有影响的功能性HTML自定义元素是一种极其有用的方式。元素名称和HTML文件名称一致，没有扩展名。当需要在一个视图中使用HTML自定义元素时，必须要包含.html扩展。为HTML自定义元素创建bindable属性时，可以通过逗号分隔属性名。

HTML自定义元素会像其他Aurelia组件，将在其他的自定义元素和属性以及所有其他视图资源中引入使用，HTML自定义元素虽然无法创建默认支持双向绑定的属性，但是提供了详细的双向数据绑定属性的方法。对于这种功能，你可能需要为你的自定义元素提供一个视图模型。

下面的例子展现了一个使用双向数据绑定的Aurelia视图自定义元素的例子。例子里的自定义元素在别的自定义元素中被引用，而且在那些自定义元素上使用了双向数据绑定。需要说明，从一个自定义元素中使用Aurelia模板引擎的所有属性方法都是可以的，例如用debounce绑定行为。

Custom Element Basics--自定义元素基础

用Aurelia创建自定义元素是非常简单的，最主要是创建名字相同的JavaScript和HTML文件。HTML文件必须使用template标签包含一个Aurelia模板标签，JavaScript文件必须要输出一个JavaScript类。Aurelia自定义元素类的标准命名是建议在类名后加CustomElement后缀，例如SecretMessageCustomElement。Aurelia将使用从JavaScript类名末尾去除CustomElement，并将自定义元素的名字，从首字母大写转化成dash-case。这意味着通过自定义元素名可能不会匹配到文件名。即便如此，我们仍旧建议您为您的自定义元素命名成如此，去匹配对应的自定义元素名。对一个自定义元素来讲，从JavaScript文件中导出多个类也是被支持的。Aurelia将使用文件里导出的第一个类作为自定义元素视图模型。每个自定义元素实例将收到他们各自分离的VM实例。

自定义元素不支持自我闭合。这意味着将无法起作用。当使用一个自定义元素时，你必须同时提供一个如下app.html中展示的闭合标签。

使用CustomElement作为后缀的VM类是可以很明确地命名你的自定义元素的。只要简单地为你的自定义元素添加一个字符串。Aurelia将不会