Question

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

成分： xxxaaa.html

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

xxxaaa.js：

export class Xxxaaa {}

app.html：

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

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

xxxAaa.html：内容未更改，仅文件名

xxxAaa.js：

export class XxxAaa {}

app.html：

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

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

INFO [aurelia] Aurelia开始 index.js：26 DEBUG [模板]为dist / app.html导入资源[“dist / xxxAaa”] index.js：26 DEBUG [模板]为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的错误报告错误的情况呢？

Answer 1

Aurelia从未看到过camelcased标记，因为DOM会降低元素和属性名称。

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

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

另一种方法：

如果您为自己的课程命名XxxAaaCustomElement Aurelia conventions will kick in，那么您就可以在标记中使用<xxx-aaa></xxx-aaa>。

aurelia，es6和classname案例

1 个答案: