ギガパンの大型無脊椎動物を表示するための小さなデモ サイトに Ember.js を使用しようとしています (たとえば、このようなもの)。それぞれが分類学的ランクによってサイトの 1 つに分類されます。この場合は、目、科、属のみです (これらはすべて同じクラスであり、種レベルの識別がないため)。13 属のみの小さなサイトです。以下は、ナビゲーションのみの単純な作業例です。
ホームページには 3 つのオーダーがすべてリストされており、それぞれの下にファミリー、次に属があります。少しクリックすると、ダイナミック セグメントを使用して、/ORDER_ID/FAMILY_ID/GENUS_ID パターンに従う URL スキームを取得していることがわかります。
ここで追加したいのは、ユーザーが任意のランクまたは属にジャンプすることを選択できるメニューです。このデザインでは、ユーザーがクリックするメニュー ボタンが必要です。div には、すべての注文、ファミリ、属のリストが表示され、ユーザーはクリックして目的のページにジャンプできます。メニュー パネルへの入力、onclick の表示などは問題ありません。私が問題を抱えているのは、メニューのリンクを使用すると、意味のわからない Ember エラーが発生することです。更新されたデモは次のとおりです。
そのデモでは、青い領域がメニュー ボタンをクリックした後に表示されるメニュー パネルであるとします。JavaScript コンソールを開き、青色のメニュー エリアで「Brachycentrus」属をクリックし、メニュー エリアで「Tallaperla」属 (一番最後にある) をクリックすると、コンソールに次のエラーが表示されます。 :
Error while loading route: TypeError {}
Uncaught TypeError: Cannot call method 'connectOutlet' of undefined
上記の再現手順では、メニューの下のコンテンツ領域でも、「Tallaperla」属をクリックすると、順序が「Plecoptera」に正しく更新されますが、科と属は更新されません。それが問題の手がかりだと思いますが、それが何を意味するのかわかりません。問題を引き起こしているのはこれら 2 つの属だけではないことを付け加えておく必要があります。メニュー領域を十分にクリックすると、エラーを再現するのは簡単です。その再現例は、私が見つけた中で最も簡単で最速のものでした。
Ember 1.0.0-rc.6、Ember Data 0.13、Handlebars 1.0.0-rc.4 を使用しています。