0

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 が表示されます。次に、コンポーネントをキャメルケース化します。

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)

したがって、2 番目の質問が来ます - この大文字と小文字の区別の原因は何ですか? es6、babel、または aurelia ですか?

更新: ここで aurelia から、クラスが見つからないという苦情が寄せられると思いますが、間違った名前のクラスを取得して使用しようとしているようです。例外自体は非常に曖昧です ( https://github.com/babel/babel/issues/887、https://github.com/babel/babel/issues/700 ) が、それが再びケースであることを正しく理解していますか? aurelia からの貧弱なエラー報告の?

4

1 に答える 1

2

DOM は要素名と属性名を小文字にするため、Aurelia はキャメルケースのマークアップを認識しません。

詳細については、この回答を確認してください。ここに抜粋があります：

ただし、注意すべきもう 1 つの点は、すべてのブラウザーで、ブラウザーが HTML ドキュメントを読み込んで解析するときに、それを DOM (ドキュメント オブジェクト モデル) に変換することです。その後、ブラウザーの組み込みの開発者ツールを使用してサイトを検査すると、DOM を表示すると、実際のソース コードでの記述方法に関係なく、DOM 内のすべての要素が小文字で表示されます。

別のアプローチ:

クラスにXxxAaaCustomElement Aurelia という名前を付けると、規則が適用され、マークアップで使用できるようになり<xxx-aaa></xxx-aaa>ます。

于 2015-03-10T14:15:45.493 に答える