[解決済み] Ember.jsにおけるビューとコンポーネントの比較
質問
ember.jsを勉強しているのですが、ビューとコンポーネントの違いを理解しようとしています。 私はどちらも再利用可能なコンポーネントを作成する方法として見ています。
Emberのホームページからビューについて。
Ember.jsのビューは、通常、以下の理由でしか作成されません。
-ユーザーイベントを高度に処理する必要がある場合
-ユーザーイベントを処理するために 再利用可能なコンポーネント
Emberのコンポーネントに関するサイトより。
コンポーネントとは、JavaScriptで動作を実装し、Handlebarsのテンプレートを使って外観を記述するカスタムHTMLタグのことです。コンポーネントを利用することで 再利用可能なコントロール を作成し、アプリケーションのテンプレートを簡素化することができます。
ビューとコンポーネントの主な違いは何ですか? また、コンポーネントよりもビューを使用することを好む、あるいはその逆の一般的な例とはどのようなものでしょうか?
どのように解決するのですか?
Ember.View
某 Ember.View は現在、W3C によって作成されたタグに限定されています。しかし、アプリケーション固有のHTMLタグを独自に定義し、その動作をJavaScriptで実装したいと考えた場合、どうでしょうか。これを実際に行うには Ember.View .
Ember.Component(エンバーコンポーネント
これこそまさにコンポーネントでできることです。実際、これはとても良いアイデアで、現在 W3C では カスタム要素 の仕様に取り組んでいます。
Emberのコンポーネントの実装は、できる限りWeb Componentsの仕様に近づけようとしています。一度 カスタム要素 がブラウザで広く利用できるようになれば、Ember のコンポーネントを W3C 標準に簡単に移行でき、新しい標準を採用した他のフレームワークでも使用できるようになるはずです。
これは私たちにとって非常に重要なことなので、私たちのコンポーネントの実装がウェブプラットフォームのロードマップと一致するように、標準化団体と密接に連携しています。
また、重要な点として
Ember.Component
は実際には
Ember.View
(サブクラス)ですが、これは完全に
孤立している
. そのテンプレートでのプロパティアクセスは
ビュー
オブジェクトにアクセスし、アクションは
ビュー
オブジェクトも対象となります。周囲の
context
または外側の
controller
にはすべての文脈情報が渡されます。
で渡されますが、これは
Ember.View
の場合はそうではなく、その周囲のコントローラにアクセスすることができます。
this.get('controller')
のようにすると、そのビューに現在関連付けられているコントローラを取得できます。
では、ビューとコンポーネントの主な違いは何でしょうか?
主な違いは、コンポーネントでは独自のタグを作成できることと、将来のある時点で カスタム要素 は、カスタム要素をサポートする他のフレームワークでそれらのコンポーネントを移行/使用することも可能ですが、確かにいくつかの点でemberコンポーネントは、特定の実装ケースに応じて、ビューをやや陳腐化することである。
コンポーネントよりもビューを使用することを好む一般的な例と、その逆はどのようなものでしょうか?
上記のように、これは明らかにあなたのユースケースに依存します。しかし、経験則から言うと、ビューでその周辺のコントローラなどにアクセスする必要がある場合は Ember.View を使用しますが、ビューを分離し、動作に必要な情報のみを渡すことで、コンテキストに依存しない、より再利用性の高いビューを実現したい場合は Ember.Component .
お役に立てれば幸いです。
更新情報
の公開に伴い Ember 2.0への道 の発表により、ほとんどの場合、View の代わりに Component を使用することが推奨されるようになりました。
関連
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
Vueの要素ツリーコントロールに破線を追加する説明
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
Vueのフィルタの説明
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
[解決済み] Reactコンポーネントに条件付きで属性を追加するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
WeChatアプレット用ユニアプリによるグローバルシェアリング
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueディレクティブv-bindの使用と注意点
-
vue ディレクティブ v-html と v-text
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方
-
jq は html ページとデータを動的に分割する。