0

我正在研究 aurealia 中的自定义组件，并遇到了我不理解的奇怪行为。考虑一下：

组件：xxxaaa.html

<template>
    <div>xxxxxx</div>
</template>

xxxaaa.js：

export class Xxxaaa {}

应用程序.html：

<template>
    <import from='./xxxaaa'></import>
    <div>
        <xxxaaa/>
    </div>
</template>

这按预期工作，显示 xxxxxx。然后，驼峰组件：

xxxAaa.html：内容没有改变，只有文件名

xxxAaa.js：

export class XxxAaa {}

应用程序.html：

<template>
    <import from='./xxxAaa'></import>
    <div>
        <xxxAaa/>
    </div>
</template>

没有显示任何内容，但日志不包含任何错误，仅：

INFO [aurelia] Aurelia 开始 index.js:26 DEBUG [template] 导入 dist/app.html 的资源 ["dist/xxxAaa"] index.js:26 DEBUG [template] 导入 dist/xxxAaa.html 的资源 []

因此第一个问题，为什么会这样？

更新：在我看来，这就像 aurelia 中的错误（它无法正确报告错误制作的自定义 elt）或我对其实际工作原理的理解存在重大差距。您能否确认这是一个错误或解释为什么 aurelia 默默地忽略了我的元素。

然后，回滚到第一个工作状态，并将 xxxaaa.js 更改为

export class xxxaaa {}

控制台日志错误：

Potentially unhandled rejection [1] TypeError: Cannot call a class as a function
    at execute._classCallCheck (http://localhost:9090/dist/xxxaaa.js:9:108)
    at xxxaaa (http://localhost:9090/dist/xxxaaa.js:12:9)
    at Container.invoke (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:362:27)
    at Array.<anonymous> (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:142:52)
    at Container.get [as superGet] (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:238:32)
    at Container.elementContainerGet [as get] (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:27:17)
    at CustomElement.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/custom-element.js:136:80)
    at applyInstructions (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:79:33)
    at ViewFactory.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:172:17)
    at CustomElement.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/custom-element.js:141:58)

于是出现了第二个问题——是什么导致了这种区分大小写的？是es6、babel还是aurelia？

更新：我希望 aurelia 在这里抱怨它找不到类，但看起来它选择了错误命名的类并尝试使用它。异常本身非常模糊（https://github.com/babel/babel/issues/887，https://github.com/babel/babel/issues/700）但我是否正确理解它又是一个案例来自 aurelia 的糟糕错误报告？

4

1 回答 1

2

Aurelia 永远不会看到驼峰标记，因为 DOM 将元素和属性名称小写。

查看此答案以获取更多信息。这是一段摘录：

不过需要注意的另一件事是：在所有浏览器中，当浏览器加载 HTML 文档并对其进行解析时，它会将其转换为 DOM（文档对象模型）。如果您随后使用浏览器的内置开发人员工具检查站点，则当您查看 DOM 时，DOM 中的所有元素都将显示为小写，无论它们在实际源代码中是如何编写的。

另一种方法：

如果你命名你的类XxxAaaCustomElement ，Aurelia 约定将会生效，你将能够<xxx-aaa></xxx-aaa>在你的标记中使用。

于 2015-03-10T14:15:45.493 回答