問題タブ [ember.js-view]

resizeそのため、アプリケーションのヘルパー (マスター) ビューを作成できることを望んでいました。主な理由は、関数を実装したいからです。

例。

そして、それを拡張します

これは私が達成したかったことの例ですが、残念ながらいくつかの問題が発生します。

ビューを使用しているルートに移動すると、Amazingすべてが正常に機能します。アプリケーションをナビゲートしてから同じルートに戻るまで、次のエラーに直面します。

Uncaught Error : ビューがレンダリングされた後、DOM に挿入される前に、ビューが再レンダリングされました。

私はその見方を広げているので、これが起こっていると確信しています。なぜこれが起こるのか、または実際に何をすべきかについてのアイデアはありますか?

そこで、外部テンプレート ファイル (.handlebars) を使用するように Ember ビューをセットアップしました。大まかな仕組みはこんな感じです。私はrequirejsモジュール形式を使用しています:

これで、すべての css および js ファイルのバンドル、uglify、縮小、パックなどに GruntJS を使用できるように、プロジェクトをセットアップしました。

また、テンプレートをプリコンパイルしたいと思います。そこで、すべてのテンプレートを 1 つの js ファイルに適切にパックするgrunt-ember-templatesをセットアップしました。生成された js ファイルは次のようになります。

テンプレートデータが必要なときはいつでもEmber.TEMPLATES["drawer-menu"]代わりに使用する必要があります。Ember.Handlebars.compile(drawerMenu)

私の質問は、開発ワークフローをどのように設定すればよいですか? つまり

1. 常にプリコンパイル済みテンプレートを使用するようにコードを変更する必要があります。その場合、開発環境でも常にプリコンパイルする必要があります。

2. 上記を行わないと、本番用にビルドするたびに、すべてのビュー ファイルを手動で編集して、コンパイル済みのテンプレートを使用する必要があります。エラーが発生しやすいもの。

これを自動的に設定するメカニズムはありますか?

Ember では、アクションをビューで処理したい場合は、次を使用して簡単に実現できます。

これをparentViewで処理したい場合は、target='view'に置き換えられますtarget='parentView'

公平に言えば、私の問題は、childViewで処理したいということであり、単に「childView」と述べるだけです

「未定義のプロパティ「send」を読み取ることができません」

次のように、ここでビューの名前を指定することもできます。

どこ

それはうまくいきませんでした。どちらもしなかった

このアクションを含むボタンは App.targetView テンプレート内にある必要があると述べて、アプリのセマンティック構造を変更するように案内しないでください。

私が知る必要があるのは、ターゲット プロパティを使用して、含まれているビューや親ビューだけでなく、特定のビューを指定する方法です:)?

ember アプリの複数の場所で使用できるフィード リーダーを作成する必要があります。

この場合、「ビュー」または「コンポーネント」のいずれかを使用することにしました。どちらの場合も、データを「ビュー」または「コンポーネント」の外側に保持する必要があるという懸念があります。コントローラーをトリガーして最新のデータを要求する必要があり、コントローラーはモデルに保存されているデータを更新します。このアプローチの問題は、フィード リーダーが使用されるすべての場所で、モデル コードのフェッチと更新を複製する必要があることです。この問題を解決する方法はありますか?

次のコードを含むテンプレートtemplates/articles.hbsがあります。

{{view "carousel"}}

はじめにに記載されているように、上記のステートメントは正しい必要があります: https://github.com/stefanpenner/ember-app-kit/wiki/Getting-Started#resolving-from-template-helpers

views/carousel.jsの簡単なコード:

ただし、これにより次のエラーが発生します。

私はcarousel.jsをviews/articles/carousel.jsに追加しようとしました。{{view}}App.CarouselView などのさまざまな名前を試しましたが、すべてうまくいきません。

私はここで何が欠けていますか？

アウトレットを持つルート テンプレートと、ネストされた動的リソースがあります。ルート ビューの入力に名前を入力すると、ajax リクエストはネストされた動的リソースのモデルを非同期に取得し、そのモデルからの情報を使用してテンプレートをレンダリングします。ルートから開始し、入力を使用してネストされたリソースを呼び出すと、すべて正常に機能します。

したがって、すべてが完全に機能し、ネストされたリソースが URL を更新しますが、URL を更新またはナビゲーション バーに貼り付けると、空白のページが表示されます。エラーはありませんが、HTML はまったくありません。ajax リクエストが成功し、モデルが作成されたことを確認しました。私が知る限り、ルート テンプレートはレンダリングされていないため、ネストされたテンプレートには行き場がありません。

ember はこれを簡単かつ自動化するはずだと思っていましたが、ネストされたルートに直接行くときにルート テンプレートをレンダリングするにはどうすればよいですか?

ルーターは次のとおりです。

は次のAppControllerとおりです。

は次のUserControllerとおりです。

モデルは次のuserとおりです。AJAX 要求によって返される JSON オブジェクトを受け入れるだけです。

特定のモデルの計算されたプロパティにバインドし、それに応じてスタイル属性を変更するコンポーネント、またはこれに適している場合はビューを作成しようとしています。とにかくこれがどのように行われるべきかに影響する場合、私はEmber App Kitを使用しています。

コンポーネントは、「limitDeg」、「currentValueDeg」の 2 つの計算されたプロパティにバインドするメーターになります。このコンポーネントを使用するすべてのモデル インスタンスは、それらをモデル計算プロパティとしてコンポーネントに提供できます。

メーターには 3 つの重複する div があります。「.meter-div」はバインディングのない単なる背景であり、そのうちの 1 つは CSS3 変換で X 度だけ回転し、現在の「limitDeg」を表示します。そのため、「transform:rotate(###deg);」を調整します。ここが鍵です。「indicator-div」があります。これは、CSS3 アニメーション ループで「currentValueDeg」に基づいて同様に回転する単純なインジケーターです。

以下は、コンポーネント/ビューを持つことについて私がどのように考えたかの基本的な大まかな概要です。

...たとえば、次のように使用します: {{#each}} ... {{my-component}} ... {{/each}}

1)コンポーネントをモデルにバインドして、「limitDeg」計算プロパティが変更されたときに「.limit-div」が CSS3 変換で X 度回転するようにしたいと思います。 .

2) 無限にループする CSS3 アニメーションで ".indicator-div" をアニメーション化し、currentValueDeg の computeProperty にバインドしたいと思います。

これは、1 つのコンポーネント/ビューでこれを行うべきですか、それとも 1 つのパーシャル内で複数のコンポーネント/ビューを行うべきですか?

その時点で選択されているかどうかに基づいて、特定の HTML 要素にクラスを追加したいと思います。現在のページに基づいて選択されます。

どういうわけか、私はそれを行う方法を見つけるのに苦労しています。

検索する必要があるフックまたはイベントはありますか?

これが私のルートです：

params.question_idクラスを要素に追加するために、それを取得して使用するにはどうすればよいですか?

代わりに、ビューのクラスでこれを行う必要がありますか?

ありがとう！