問題タブ [web-component]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
dart - イベント ハンドラ内からイベント ストリームへの参照を取得するにはどうすればよいですか?
Web ページ上の多数の Web コンポーネントのグローバルな状態を管理する必要があります。(たとえば、各 Web コンポーネントには「選択」ボタン/機能があり、一度に 1 つのコンポーネントのみが選択されるようにコンポーネントを追跡します。)
コンポーネントのグローバルな状態を管理するために、各 Web コンポーネントはメイン Web アプリの共通ハンドラーにイベントのストリームを提供します。残念ながら、グローバル状態を管理するために、ハンドラーがどのストリーム/Web コンポーネントから呼び出されたかを知る必要があります。ハンドラーがこの情報を取得するにはどうすればよいですか?
ここに私のサンプルコードがあります:
html - ナビゲーションで動的に作成される入力フォーム フィールドのオートコンプリート/復元
<input>
HTML ページに要素があるとします。値を入力し、別のページに移動して戻ると、通常、その値が復元されます。
1) Firefox では、BFCache によりページ全体の状態が復元されています: https://developer.mozilla.org/en-US/docs/Working_with_BFCache。(つまり、実行中のスクリプトの状態も復元されます。)
2) Chrome では、高速ページ キャッシュが機能していないように見えますが (そのため、ページは元の状態にリセットされます)、入力フィールドの値は保持されています。
スクリプトによってフィールドを動的に追加する<input>
と、Firefox では値が復元されます (すべてが復元されているため)。
ただし、Chrome では、<input>
フィールドを作成する Javascript を再度実行する必要があるため、この入力フィールドはエンジンにとってまったく新しいものとして表示され、値が復元されません。
したがって、私の質問は次のとおりです。動的に生成され<input>
た s を使用して Chrome の機能 2) を実装する方法 (または、入力フィールドの ID に関するヒントを Chrome に与える方法)。
(私がこれらすべてに興味を持っている理由の 1 つは、提案されているカスタム要素です: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html。これまたはポリフィルを使用してhttps://github.com/mozilla/web-components/blob/master/src/document.register.jsまたはhttps://github.com/Polymer/CustomElementsは、大量の (入力) を作成することを意味します。要素をプログラム的に実装し、優れたユーザー エクスペリエンスを得るには、組み込み要素として機能する必要があります)。
javascript - Web アプリで Web コンポーネントを使用する理由は何ですか?
Google は I/O 2013 でWeb Componentsのサポートを導入しました。Web ページに挿入するための再利用可能な HTML モジュールを作成できます。しかし今日では、<iframe>
-s、hidden <div>
-s、AJAX、EJS や mustache.js などの JavaScript テンプレート、さらには XSLT を使用して、これらのウィジェットをクライアント側に埋め込むことができます。<iframe sandbox>
、Google Caja、または Microsoft Web Sandboxを使用してサンドボックスに入れることもできます。Web コンポーネントの何が特別で、それを使用する必要があるのでしょうか?
javascript - HTML リンク rel を使用して HTML ドキュメントをインポートする
を使用して HTML ドキュメントをメイン ドキュメントにインポートしようとしています。
しかし、それは機能していないようです。
Chrome 28 を使用してこのプレゼンテーションをフォローしています。次の 2 つのフラグを で有効にしましたabout:flags
。
何か不足していますか?または、それを取得するために有効にする必要がある別のフラグがありますか?
dart - Dart が間違って WebComponents をコンパイルする
Dart で WebComponents をコンパイルすると、次の自動生成コードが得られます。
このコードでは、ノードツリーを変更するとdocument
、マークされた行が間違ったノードを選択します!
この問題を解決するために何かできることはありますか?
ember.js - コントローラ/ビュー アーキテクチャをコンポーネントに変換する Ember.js
かなり複雑なUI /データ操作ロジック(ホットキー、コピーペースト、複製、オートコンプリートなど)を持つ既存DetailController
のアプリがあり、ビューはUIイベントをコントローラーに送信します。DetailView
コントローラーはロジックを処理します。
これを Ember コンポーネントに変換したい。
- これは基本的に、ビューとコントローラーを にマージすることを意味し
DetailComponent
ますか? これは私には面倒で間違っているようです。 - そうでない場合、コンポーネント内でコントローラーとビューを内部的に使用するにはどうすればよいですか? つまり、コンポーネントの完全な分離と明確に定義されたパブリック インターフェイスが必要ですが、コンポーネント内では、整理のためにコントローラーとビューを使用したいと考えています。それは可能ですか?
- コンポーネント テンプレート内で
{{render}}
、、、{{view}}
を使用できますか?{{partial}}
angularjs - angular は、mozilla のブリックや google のポリマーなどの Web コンポーネント イニシアチブのコンテキストのどこに適合しますか?
Angular のディレクティブと「Web コンポーネント」の間には明らかな類似点がありますが、Angular が同じようにシャドウ DOM を活用しているかどうかはわかりません。今後数年間で Web コンポーネントの概念をサポートまたは強化するために、angular がどのように進化するのか疑問に思っていると思います。