aurelia.ioの方法を拡張します

キーテイクアウト

最新のJavaScriptフレームワークであるAurelia.ioは、開発者がHTMLでカスタム要素と属性を作成し、Webアプリケーションの柔軟性と機能を強化できるようにします。 Aurelia.ioのカスタム属性を使用して、既存のプラグインをラップしたり、一般的なバインディングのショートカットを提供したり、直接コードアクセスなしで既存のHTML要素を変更したりできます。これにより、既存の要素に新しい機能を簡単に追加できます。 Aurelia.ioで新しい要素を作成するには、要素のクラスとそのHTML表現のビューを定義することが含まれます。これにより、カスタムの動作と構造を備えたまったく新しい要素を作成し、コードの再利用とモジュラー設計を改善できます。
• aurelia.ioは、一連の単純な規則を使用して、必要なコードの量を減らし、開発者に優しいものにします。また、他のJavaScriptライブラリやフレームワークとの互換性を提供し、Web開発の柔軟性を高めることができます。
• 老犬を教えるHTMLの新しいトリックは、今日の現代のJavaScriptフレームワークの主要な焦点です。 WebComponentsなどの潜在的な標準に従ったり、カスタムディレクティブを作成したり、既存のクラスを拡張することにより、選択したフレームワークがHTMLのマークアップ自体を拡張する手段を提供する可能性が高くなります。 Brad Barrowによって書かれた以前の記事で、あなたは新しいプレーヤーであるAureliaに紹介されました。この記事では、Bradの記事とコードに基づいて、Aureliaの慣習をフォローしてカスタム要素とカスタム属性を作成する方法を示します。 この記事の完全なコードはGitHubリポジトリで見つけることができ、ここで構築するもののデモを見ることができます（アプリが初期化するのに時間をかけてください）。
なぜマークアップが必要なのか？
アクションにまっすぐジャンプする前に、まず新しいコンポーネントを作成するための潜在的なユースケースを理解しましょう。そのために、下の図に示すように、紹介例を概念的に見てみましょう。ビューモデル（VM）とビューで表される2ページがあり、面白い写真とGIFビデオを表示しています。それらのそれぞれには、画像とテキストブロックを含む投稿をレンダリングする繰り返しリストがあります。

aurelia redditクライアントの概念図

ビューを見ると、データ収集とレンダリングが1つのVM/ビューペアに緊密に結合されていることがわかります。

これは簡単な例では問題ではないかもしれませんが、システムが成長し、ますます多くの要件が収集されるにつれて大きな欠点に変わる可能性があります。カスタム属性を使用して既存の要素を強化する

面白いページの各投稿にポップオーバーを提供するリクエストを受け取ると想像してください。それを行うために、必要なデータ属性を配置することにより、Bootstrapの機能をMarkupに直接簡単に配線できます。しかし、他のページでも突然それを行う必要がある場合はどうでしょうか？カスタム属性を宣言することで機能を提供することで、私たちの生活をずっと楽にすることができます。これらは、次のシナリオに特に役立ちます：

• 既存のプラグインをラップ
スタイルやクラスなどの一般的なバインディングのショートカット
直接コードアクセスなしで既存のHTML要素 /カスタム要素を変更する

次に、手を汚し、最初のカスタム属性を構築するために必要なことを見てみましょう。

ポップオーバーの作成

始めたいことを見てみましょう。新しい属性ポップオーバーは、ポップオーバーの配置、タイトル、コンテンツのパラメーターを受け入れる必要があります。配置は右側に固定されているため、値としての単純な文字列で十分です。他の2つのプロパティについては、Aureliaのデータバインディングを使用して、反復値をマッピングします。ファイルをロードするために、Aureliaの要求機能を使用します。 From属性には、インポートするリソースへの相対パスが含まれています。

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="aurelia.ioの方法を拡張します" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

それを実現するために、PopOver.jsというSRCフォルダーに新しいJavaScriptファイルを作成することから始めます。カスタム属性は、他のすべてのAureliaコンストラクトと同様に、事前定義されたAPIに渡される関数のコレクションではなく、単純なエクスポートされたES6クラスです（多くのレガシーフレームワークが行うように）。

他のフレームワークと比較して、Aureliaはメタデータを介してそれらを記述することにより、構造を宣言します。しかし、静的関数や複雑なAPIを使用する代わりに、Aureliaは最先端のES7デコレータを活用してそれを実現します。パッケージAurelia-Frameworkから必要なデコレーターをインポートします。コントロール自体については、Twitter Bootstrapが提供するPopover JavaScriptコントロールを使用します。そのため、bootstrapsのJavaScriptコードを初期化するために、jQueryハンドル$とブートストラップをインポートします。

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="aurelia.ioの方法を拡張します" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

次のステップは、前述のメタデータを適用して、Aureliaがファイルをロードしたときに何が得られるかを知っていることです。 CustomAttributeデコレータを接続することにより、指定された値でコンポーネントに名前を付けます。一方、バインド可能なデコレーターは、私たちの見解が拘束できるプロパティを宣言しています。利用可能なプロパティごとにこのデコレーターを繰り返すだけです。

最初の注射デコレータは、実際のDOM要素をコンストラクターメソッドのパラメーターとして提供し、後で使用するために保存されます。

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="aurelia.ioの方法を拡張します" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

これで、Bindと呼ばれる方法を宣言することにより、行動のライフサイクルを選択できるすべての必要な情報が得られました。これにより、jQueryの対応方法に匹敵する適切なタイミングでコンポーネントを初期化することができます。

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="aurelia.ioの方法を拡張します" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

最後になりましたが、変更されたハンドラーを追加します。バインディングソースは時間とともに変化していないため、これらは実際には例では実行されていないことに注意してください。

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

githubの完全なファイルを表示

既存の要素に属性を提供することで新機能を追加する方法がわかりました。先に進んで、独自のカスタム要素を書き始めましょう。

カスタム要素を使用して新しいタグを作成します

まったく新しい要素を作成するために、Aureliaはカスタム属性と非常によく似たアプローチを活用します。例として、GIFページの投稿を再構築して、Reddit-GIFと呼ばれるカスタム要素で表され、実際のビデオのオンとオフを切り替える可能性を提供します。私たちの見解の結果のマークアップは、これでなければなりません：

@<span>inject(Element)
</span>@<span>customAttribute('popover')
</span>@<span>bindable('title')
</span>@<span>bindable('content')
</span>@<span>bindable('placement')
</span><span>export class Popover {
</span><span>...</span>

ご覧のとおり、新しいタグを使用し、データバインディングを介してデータプロパティを介して必要な情報を提供します。

次のステップは、実際の要素を作成することです。フォルダーSRCに、要素のビューReddit-gif.htmlとそのVM Reddit-gif.jsを作成することにより、それを行います。次に見られるビューは、gifs.htmlからの以前のマークアップを活用し、実際のビデオを埋め込むために使用されるiframeを切り替えるボタンを追加することです。繰り返しになりますが、Aureliaのビューはテンプレートタグに包まれています：

VMパーツを見ると、カスタム属性を作成するときと同様のプロセスに従います。しかし、今回は別のデコレーターを活用して、Aureliaに、データという名前の1つのプロパティのみを使用してCustomElementを作成することを伝えます。

<span>constructor(element) {
</span>  <span>this.element = element;
</span><span>}</span>

次に、iFrameを表示するかどうかを追跡するために、Gifactiveメンバーを定義しています。また、IFRAMEが見えない場合はコンテンツを事前にロードしないように、最初にGIFSRCメンバーを空にするように設定します。

<span>bind() {
</span>  <span>// initialize the popover
</span>  <span>$(this.element).popover({ 
</span>    <span>title: this.title,
</span>    <span>placement: this.placement,
</span>    <span>content: this.content,
</span>    <span>trigger: 'hover' });
</span><span>}</span>

最後になりましたが、各コールで可視性とソースをフリップするトグルボタンで使用されるトグルギフ関数を追加します。

<span>titleChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.title = newValue;
</span><span>}
</span>
<span>contentChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.content = newValue;
</span><span>}
</span>
<span>placementChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.placement = newValue;
</span><span>}</span>

ここで完全なHTMLファイルとJSファイルをこちらで表示できます

コードの量を規則で減らす

<span><span><span><require> from<span>="./reddit-gif"</span>></require></span><span><span></span>></span>
</span>...
<span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><reddit-gif> data.bind<span>="p.data"</span>></reddit-gif></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span>

Aureliaは、開発者エクスペリエンスを可能な限り快適にすることです。真実に直面しましょう。私たちの多くは多くのタイプを好きではありません。したがって、貴重なキーストロークを節約し、時間の経過とともにメンテナンスを改善するために、Aureliaは一連の簡単な慣習を使用します。たとえば、バインド可能なデコレーターのフルバージョンは実際にはこのように見えるかもしれません。他のすべてのオプションは自動的に推測されます。

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="aurelia.ioの方法を拡張します" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

見るべきもう1つのことは、複数のプロパティの使用を短縮する方法です。したがって、それぞれを1つずつ定義する代わりに、動的特性を期待するようにカスタム属性に伝えることもできます。そのために、Dynamicoptionsデコレーターでクラスを飾ります。これで、同じビューマークアップを再利用できますが、名前が示すように、動的なコンテキストでは非常に役立つすべてのプロパティ宣言を手動で定義する必要はありません。これは、DynamicPropertyChangedと呼ばれる1つの一般的な変更ハンドラーを書くことができることを意味します。これは、バウンドプロパティが変更されるたびに呼び出されます。

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="aurelia.ioの方法を拡張します" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

しかし、カスタム要素はどうですか？さて、私たちはそれを認識することさえせずに、すでにいくつかの慣習を暗黙的に使用しています。システムは、同じ名前を持っているだけで、ビューとVMペアを自動的にまとめました。別のビューを使用する必要がある場合は、Decorator @useview（RecativePath）を使用できます。または、@noviewを宣言してビューをまったく使用しないでください。デコレーターのUseshadowdomを追加することで、狂って、Shadowdomに見方をレンダリングすることもできます。その用語に慣れていない場合は、この記事をご覧ください

結論

アウレリアのチームである私たちは、カスタム要素と属性を活用することにより、HTML自体を拡張する方法の簡単な概要を提供したいと考えています。例を通して、柔軟な、しかし使いやすいフレームワークを提供することで、開発者エクスペリエンスに焦点を当てることができることを願っています。ご不明な点がございましたら、Gitterチャンネルに参加してください。また、最初のカスタム要素と属性を書くときのあなたの経験を聞きたいです。

Aurelia.io

でHTMLを拡張することに関するよくある質問（FAQ）

aurelia.ioは、Web、モバイル、およびデスクトップ開発のための最新のオープンソースJavaScriptフレームワークです。開発者がカスタムHTML要素を作成し、既存のHTML要素にカスタム属性を追加し、HTMLレンダリングのフローを制御できるようにすることにより、HTMLを拡張します。これは、Aureliaの強力なテンプレートエンジンを通じて達成されます。これにより、カスタム要素と属性を解釈し、標準のHTMLとしてレンダリングします。これにより、クリーンで読みやすいコードを維持しながら、よりダイナミックでインタラクティブで複雑なWebアプリケーションが可能になります。

aurelia.ioは、他のJavaScriptフレームワークと比較していますか？

aurelia.ioは、Web標準、シンプルさ、および拡張性に焦点を当てているため、他のJavaScriptフレームワークから際立っています。多くのフレームワークとは異なり、aurelia.ioはコラボレーションライブラリのコレクションになるように設計されています。つまり、必要なだけフレームワークを使用できます。また、コンベンションベースのクリーンなコーディングを強調し、必要なボイラープレートコードの量を減らします。さらに、Aurelia.ioのWeb標準に従うことへのコミットメントは、コードが今後のWebテクノロジーと将来のプルーフで互換性があることを意味します。 Aurelia.ioのカスタム要素には、要素のクラスとそのHTML表現のビューを定義することが含まれます。クラスには要素のロジックが含まれ、ビューはそのHTML構造を定義します。定義されると、カスタム要素は、標準のHTML要素と同様に、Aurelia.ioアプリケーションで使用できます。これにより、コードの再利用とモジュラー設計が可能になり、アプリケーションが開発と維持を容易にします。 IOは、既存のHTML要素にカスタム動作を追加する方法です。これらは、属性のロジックのクラスとHTML表現のビューを使用して、カスタム要素と同様の方法で定義されています。定義されると、カスタム属性はAurelia.ioアプリケーションのHTML要素に追加でき、まったく新しい要素を作成する必要なく機能を拡張できます。

aurelia.ioは双方向のデータバインディングをサポートしています。つまり、モデルの変化はビューを自動的に更新し、その逆も同様です。これは、Aurelia.ioの観測可能性システムを通じて達成され、データへの変更を追跡し、ビューの関連部分を更新します。これにより、UIが常にデータの現在の状態を反映する動的でインタラクティブなアプリケーションを簡単に作成できます。 .ioは、他のJavaScriptライブラリおよびフレームワークと互換性があるように設計されています。モジュラーアーキテクチャを使用します。つまり、使用するフレームワークのどの部分を選択して選択できます。これにより、Aurelia.ioを既存のプロジェクトに簡単に統合したり、Aurelia.ioと並んで他のライブラリやフレームワークを使用したりすることができます。複雑なナビゲーションシナリオを可能にする強力なルーターが含まれています。ルーターは、他の機能の中でも、ネストされたルート、オプションのパラメーター、および動的ルートをサポートしています。これにより、Aurelia.ioを使用して単一ページのアプリケーションを簡単に作成できます。ここでは、ユーザーはページを更新せずに異なるビュー間でナビゲートできます。

aurelia.io？

aurelia.ioの学習曲線は、簡単に学習できるように設計されています。 JavaScriptとHTMLに精通している場合は、Aurelia.ioをすばやく拾うことができるはずです。フレームワークのドキュメントは包括的であり、開始するのに役立つ多くの例が含まれています。信頼性とパフォーマンス。ユニットテスト、統合テスト、エンドツーエンドテストの組み合わせを使用して、フレームワークのすべての側面をカバーします。パフォーマンスの観点から、Aurelia.ioは、最小限のフットプリントと最適化されたレンダリングを備えた高速で効率的になるように設計されています。 IOには、フレームワークに貢献し、お互いにサポートを提供する活気に満ちた活発な開発者のコ​​ミュニティがあります。コミュニティフォーラム、ギターチャットルーム、スタックオーバーフロータグなど、多くのリソースが利用可能です。さらに、Aurelia.ioチームは専門的なサポートとトレーニングサービスを提供しています。

以上がaurelia.ioの方法を拡張しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。