ember.js - html select をルーター パラメータにバインドする

Question

ドロップダウンから選択できる原因/慈善団体の統計を表示するダッシュボードがあります。ユーザーがドロップダウンから新しい原因/慈善団体を変更すると、/#dashboard/British Heart Foundation などの URL に原因/慈善団体の名前が含まれるようにルーターを移行したいと考えています。

これが私の試みです。コントローラーは、現在選択されている原因/慈善団体を監視し、変更された場合は移行します。問題は、ルートをロードした後に現在の原因/慈善団体が設定されたときに遷移がトリガーされ、無限ループが発生することです。これで、遷移をトリガーする前に原因の前の値を確認し、null でないことを確認できることがわかりましたが、私のアプローチは少しずれているように感じます。コントロールをルーターパラメーターにバインドする慣用的な方法は何ですか?

App.Router.map(function(){
  this.resource('dashboard', { path: '/dashboard/:cause' });
});

App.DashboardRoute = Ember.Route.extend({
  model: function(params){
    return {
      cause: params.cause,
      causes: ['British Heart Foundation', 'Great Ormand Street Hospital']
    }
  }  
});

App.DashboardController = Ember.ObjectController.extend({
  changeCause : function(obj, keyName, value){
    this.get("target").transitionTo("dashboard", {cause: this.get("cause")});
  }.observes("cause")
});

<script type="text/x-handlebars" data-template-name="dashboard">
  {{ view Ember.Select contentBinding="controller.causes"  valueBinding="controller.cause" }}
  <h1>{{ controller.cause }}</h1>
</script>