ポリマー要素のメンバー関数にアクセスする方法

この記事では、ポリマー開発者にとって一般的な課題であるポリマーオブジェクト内のメンバー関数へのアクセスを調査します。 Shadow Domカプセル化の役割を強調して、正しいアプローチと誤ったアプローチを調べます。

キーテイクアウェイ

ポリマーオブジェクトメンバーへのアクセスは、要素名で直接機能します（

IDセレクターなし）が推奨されるアプローチです。
• イベントは、機能アクセスを試みる前に要素が完全にアップグレードされ、#エラーが防止されます。
ポリマー要素は再利用可能なカスタムHTML要素であり、Web開発効率を高めます。さまざまなJavaScriptライブラリとフレームワークでシームレスに動作します
• polymer-readyundefined誤ったアクセスの落とし穴
Webコンポーネントを検討してください：

。 Shadow DOMカプセル化により

を使用してIDを介して機能にアクセスしようとすることを試みます。 返された要素は内部関数を公開しません。それらは。として表示されます

正しいアプローチ<x id="radial-button-template"></x> document.querySelector("#radial-button-template") undefined

方法1：直接要素名アクセス最も簡単な方法は、要素のタグ名を：で直接使用することです。

これにより、シャドウDOMの制限をバイパスし、メンバー関数への直接アクセスを提供します。 一般に、この理由でポリマー要素にIDを割り当てることを避けることが好まれます。 メソッド2：

イベント

querySelector

ポリマーの非同期要素アップグレードプロセスは、アップグレードが完了する前に関数にアクセスしようとすると問題を引き起こす可能性があります。

var btn = document.querySelector("x-radial-buttons");
btn.getFirstElement; // Correctly returns the element

イベントはこれを解決します：

これにより、ポリマー要素が完全に初期化された後にのみ関数呼び出しが発生することが保証されます。

実用的なアプリケーションpolymer-ready

次のJavaScriptスニペットは、ポリマー要素とその機能へのアクセスを示しています。

このコードは、polymer-ready要素の準備ができた後、

に正しくアクセスします。

window.addEventListener('polymer-ready', function(e) {
  var xFoo = document.querySelector('x-foo');
  xFoo.barProperty = 'baz'; // Access functions here
});

さらなる学習リソース

Microsoftは、パフォーマンスの最適化、Webプラットフォームの基礎、HTMLとJavaScriptを使用したユニバーサルWindowsアプリの構築に関するチュートリアルなど、JavaScriptとWeb開発に関する広範な無料学習リソースを提供しています。 これらのリソースは、Visual StudioコミュニティやAzure Trialなどのツールとともに、包括的な学習パスを提供します。 この記事は、MicrosoftのWeb開発シリーズの一部です。

(function(PokémonApp) {
  // ... (other code) ...

  form.addEventListener('submit', function(e) {
    e.preventDefault();
    playerElement.speak();
    var btn = document.querySelector("x-radial-buttons");
    btn.getFirstElement(); // Correct access
  });

  // ... (rest of the code) ...
})(PokémonApp);

よくある質問getFirstElementx-radial-buttons

このセクションには、書き直された記事の本体で既にカバーされている情報が含まれているため、省略されています。 ポリマーの要素、その機能、およびメンバー機能へのアクセス方法に関する重要なポイントは、すでに上記で説明されています。

以上がポリマー要素のメンバー関数にアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。