問題タブ [ember-components]

とプロパティを持つコントローラーApplicationControllerがあります。controllerIntcontrollerString

そして、プロパティを持つコンポーネントRedSquareComponentがcomponentIntありcomponentStringます。

とをhbs-template 経由でバインドcontrollerIntします。controllerStringcomponentIntcomponentStringcomponentString=controllerString="VALUE FROM CONTROLLER"

値をに設定するメソッドRedSquareComponentもあります。.on('init')"SET ON INIT"componentString

コンポーネントにアクションを追加して、オブジェクト (赤い四角) のクリックを処理し、値 (1 など) を に設定しましたcomponentInt。

しかし、このアクションが機能すると --componentStringも変化し (理由はわかりません)、 と等しくなり"VALUE FROM CONTROLLER"ます。

それは本当に期待される動作ですか？

同じコードは Ember 12.4 でも問題なく動作しますが、いくつかの 13.* バージョンで確認しましたが、動作しません。

https://jsfiddle.net/AlexeyBedonik/a23ev98w/3/

ember.js アプリケーションでトップ ナビゲーション バーを作成し、それをコンポーネントに変換して、ユーザーがサインインしたときに簡単な「ようこそ {{currentUser.fullName}}」の紹介を表示できるようにしました。ナビゲーション バーがコンポーネントになる予定ですが、今のところ、これが正しく機能するようにしようとしていることです。また、ember-simple-auth アドオンも使用しており、session.isAuthenticatedこれを実現するために値を使用しています。

もちろん、ユーザーがサインインすると「インデックス」に移行する「ログイン」ルートがあります。session.isAuthenticated何らかの理由で、「インデックス」への移行中に値がすぐにキャッチされないようです。これがなぜなのかはわかりませんが、それは別の問題です。

とにかく、私はこのアプリケーションで多くのコンポーネントを使用しており、これらのコンポーネントのほとんどはセッションから値を取得し、ルートとは無関係にストアを照会して、これらのコンポーネントを複数のルートで使用できるようにしています。ナビも例外ではありません。現在、次の作業コードがあります。

私が読んでいるものはすべてdidReceiveAttrs()、オブザーバーの代わりに使用することを示唆しています。また、計算されたプロパティは通常、オブザーバーよりも使用したいものであると言われています。ただし、次のものがないと何も機能しないようです。

それを計算されたプロパティに変換しようとすると、「インデックス」ルートに既に移行した後にページを更新しない限り、プロパティの変更に対して何もしないようです。this.get('session.isAuthenticated') ロジックでメソッドだけを使用しようとするとdidReceiveAttrs()、ページの更新が必要です。

Ember.computedでは、 and の使用方法について何が理解できませんdidReceiveAttrs()か? 誰かが私に例を挙げてもらえますか? または、私が達成しようとしていることをより効率的に行う方法を教えてください。

更新されたコード:

更新 2 (@AdamCooper と @kumkanillam の助けを借りた最終コード):

したがって、これは最小限のコードであり、オブザーバーと計算されたメソッドを引き続き使用しますが、コンポーネントのライフサイクルは使用しません。だから、私が思いついたのは、オブザーバーを時々使用することがまだ必要だと思います。

この問題に関する多くの質問を読みましたが、ここにある問題はないようです。

私はサードパーティのコンポーネント (ember-highcharts) を使用していますが、これは問題なく動作します。

ダッシュボードと呼ばれるルートがあります。今のところ、このルートはダミーデータを使用しているだけで、ストアは使用していません。これは問題を説明するのに役立ちます。

テンプレート/ダッシュボード.hbs

ルート/dashboard.js

templates/components/summary-chart.hbs

components/summary-chart.js

モデルが未定義で、概要チャート コンポーネントに渡されないのはなぜですか? チャートはレンダリングされますが (タイトルが表示されます)、モデルが定義されていないため、もちろんデータはプロットされません。

コンポーネントをこれに変更すると、データはコンポーネントに対して「ローカル」になり、グラフはデータ ポイントでレンダリングされます。

templates/components/summary-chart.hbs

components/summary-chart.js

「summaryData」は「modelTestData」と同じデータ構造であるため、チャートはそれをプロットする方法を理解することに注意してください。

私が理解していないのは、ルート/コントローラーの組み合わせがモデルを子コンポーネントに渡さない理由です。

Ember 2.7では、モデルPersonを持つクラスがあると仮定します (が唯一の属性であると仮定します)。Addresscity:DS.attr()

アプリ/モデル/person.js

は、ステータス フィールド (採用、退職、解雇など) をEmployee継承して追加します。Person

アプリ/モデル/employee.js

を表示しているコンポーネントではEmployees、次のようになります。

app/templates/components/employee-list.hbs

テンプレートが Address モデルからこの人の市区町村を表示できるように、これEmployee(つまり、この ' ')の住所を取得する EmberJS の方法は何ですか?Person

現在の状況: コンポーネントの「didInsertElement」メソッド内から特定のモデルのレコードを作成し、そのデータをデータ ストアに追加する方法を見つけようとしています。

現在の状況の理由:コンポーネント HBS ファイルのボタンにイベント リスナーをアタッチしています。ボタンの 1 つは、2 つのカスケードされた軽い ajax 呼び出しをトリガーします。これらの ajax 呼び出しの最後の応答によって、レコードを作成する必要があるかどうかが決まります。

私が抱えている問題:コンポーネントから次のようにストアにアクセスしようとすると:

未定義のオブジェクトを取得しています。お尋ねの方のために、私はすでに次の行を私のコンポーネントに追加しています:

そして、私はすでに Ember-Data をインストールしています。

解決策:多くの調査の結果、ストアとのやり取りはメイン ルートを介して行うのが最適であることがわかりました。しかし、ルートからイベント リスナーをコンポーネントの jquery ウィジェットにアタッチするにはどうすればよいでしょうか。

すべてのイベント リスナー コードをコンポーネントからルートに移動し、それによって ember が提供するはずのモジュール性を元に戻す必要のないソリューションはありますか?

私は素晴らしいプラグインinfinity-loaderを使用しています。バインドされているルートのテンプレートで使用すると、うまく機能します。

しかし、多くの人と同じように、コンポーネントで使用することにしました。まあ。このフィドルショーのようなアクションをバブル/送信する方法を理解しており、この質問が説明しています。

悲しいことに、これ、これ、およびこれは役に立ちませんでした。

奇妙なのは、最初のページの後、Infinity アドオンがアクション infinityLoad を起動することです。コンポーネントでハンドラーを削除すると、コンソールにアクションが「何も処理されていません」というエラーが表示されるので、アクションがリストの最後までスクロールすると発火します。

しかし、コンポーネントが「泡立つ」と、ルートに飲み込まれたように見え、アドオンが独自の内部ハンドラーを起動しません。

/templates/employees/index.hbs

/routes/employees/index.js

/templates/components/employee.hbs

/components/employee-list.js

注アクションをルートに送信するために、Dockyardのこの優れたアドオン を使用して、この問題を解決しようとしました。アドオンは機能しますが、私のコードは機能しません。

アップデート

以下のコードを使用すると、イベントがバブルアップし、ページをスクロールするとアラートが表示されます。しかし、次のページをロードするローダー (基本的にはルートの孫) を取得する方法を理解する必要があります。

/templates/employees/index.hbs

/routes/employees/index.js

/templates/components/employee.hbs

/components/employee-list.js

これは、その部分を理解するのに役立ちました。

これらのコンポーネントがあり、他のコンポーネントから呼び出すことができるようにしたいです。

templates/components/post-edit.hbs

components/post-edit.js

テンプレート/コンポーネント/form-alert.hbs

components/form-alert.js

ajaxリクエストの後、 post-edit.jsファイルform-alert内からコンポーネントを呼び出したいです。他のコンポーネントを呼び出して ajax リクエスト後にレンダリングし、クラス に入れたい。 他のコンポーネントからEmberコンポーネントを呼び出してターゲット要素にレンダリングする方法は?
form-result-placeholder

私の Ember バージョン: 2.8.0

クロージャー アクションを使用する Ember では、次のように関数を渡すことができます。

1

次のように、アクションを呼び出す代わりに。

2

(1) では、このコンポーネントをサポートするコードは次のようになります。

これは、JQuery を使用して DOM からいくつかの要素を削除し、外部からロードされた JS ファイルにある別の関数 (filepicker.pick) を呼び出します。

(2) では、同じコードがアクション内にあります。

これを行うことの長所と短所は何ですか？component（1）はこれを行うための推奨される方法ではないことを理解していますが、確かに（1）は他のコード（コンポーネントのプロパティなど）へのアクセスを容易にします。いつものように、Emberドキュメントはこれに光を当てていないようです（とにかく見つけることができるわけではありません）。私が見つけることができるのは、任意の関数の呼び出しを思いとどまらせることを強調しているこのブログ投稿だけです (そうでなければ、そもそもなぜアクションがあるのでしょうか?)

したがって、この質問は意見につながる可能性がありますが、それは私が求めているものではありません. SCOPINGこれら2つのアプローチの違いは何ですか？たとえば、アクション内の関数内にいる場合、JS ランタイムの観点からのスコープの違いは何ですか? たとえば、「これ」はどちらの場合も同じですか？