その一部がリストから要素を選択することに関係するアプリを構築しています。これにはアウトレットを使用し、2つのビューを切り替えます。1つは現在選択されている要素('detailView')
を表示し、もう1つは選択するすべての要素のリストを表示します('listView')
。これはドロップダウンリストのように機能します。リストビューで現在選択されている要素を表すlist要素にもis-selected
、バインドされた属性であるクラスがあります。
リストビューから詳細ビューに切り替えると(ユーザーがクリックした結果、要素を選択したことを意味します)、現在選択されているアイテムを示すオブジェクトが更新されます。これにより、リストビューのリスト要素に対するクラス属性のバインドにより、Emberライブラリ(EmberHandlebars.bindClasses
関数内)でエラーが発生します。
上記の関数は、新しい値に関して属性バインディングを更新しようとしているようであり、対応するHTMLコードを見つけることによって更新します。問題は、ビューを切り替えたため、このHTMLが現在存在しないことです。
私たちがやろうとしていることの例でフィドルを作りました:http://jsfiddle.net/7k8n7/2/
この例で悪いと思うデザインの選択肢を見つけた場合は、遠慮なく言及してください。ただし、Fiddleのポイントは、動作するはずのコードにエラーを作成することです。
エラーを生成するコードは次のとおりです。
goToDetail : function(router, event) {
router.transitionTo('detail');
router.get('selectedModel').set('content', event.context);
}
この関数で2行の順序を切り替えると、detail-view
も表示されません。