Ember JSは、すべてのルートがビューの動的セグメントであるネストされたルートに移行します。

Question

EmberJSを使用してアプリケーションを作成しています。しかし、私たちはまだこのフレームワークでは新しく、まっすぐに見えるもののいくつかを解決するのに苦労しています。

モデルはかなりシンプルです。キュー、タスク、イメージという3つのモデルがあります。これらのモデルのすべてのルートとルートの動的URIセグメントは、：queue_id /：task_id /：image_idの形式でネストされています。

ルートがこのように構成されている：HTMLで

App.Router.map(function() { 
    this.resource('queue', {path: ':queue_id'}, function() { 
     this.resource('task', {path: ':task_id'}, function() { 
     this.resource('image', {path: ':image_id'}); 
     }); 
    }); 
} 

そしてどこかを、私たちは、タスクからすべての画像を反復処理するには、この単純なテンプレートを持っている：

{{#each task.images}} 
    <li> 
     {{#view App.ThumbnailView.contentBinding="this"}} 
     <img {{bindAttr src="thumbnail.url"}} /> 
     {{/view}} 
    </li> 
{{/each}} 

そしてここにはありますサムネイル表示のコード：

App.ThumbnailView = Ember.View.extend({ 
    tagName : 'a', 
    click : function(e) { 
     var task = //assume this value exists; 
     var queue = //assume this value exists; 
     var image = //assume this value exists; 

     this.get('controller.target.router').transitionTo('image', queue, task, image); 
    } 
}); 

最後に、ここにはImageRoute：

App.Image = Ember.Object.extend(); 
App.Image.reopenClass({ 
    find : function(image_id) { 
     //This is where I set a breakpoint 
     console.log(image_id); 
    } 
}); 

App.ImageRoute = Ember.Route.extend({ 
    model : function(params) { 
     //image_id is the last uri segment in: #/1/1/1 
     return App.Image.find(params.image_id); 
    } 
}); 

問題： this.get('controller.target.router').transitionTo()の呼び出しが動作しているようです。サムネイルビューの1つをクリックすると、URLが変更されます（例：/ 1/1/2から/ 1/1/3など）。しかし、UIの状態の変化は見られません。また、ブレークポイントを置いた行はトリガされていないようです。しかし、私はページをリフレッシュするとうまくいきます。

移行コードに問題はありますか？

ありがとうございました。注意すべき

Answer 1

2つのこと：

this.get('controller').transitionToRoute('image.index', queue, task, image); 

これは、動作を変更しないかもしれませんが、それはより多くのエンバー慣用的です：代わりに

this.get('controller.target.router').transitionTo('image', queue, task, image); 

利用

まず、。

2つ目は以下の通りです：エンバーは、トランジションと一緒にモデルを渡していますので、modelフックを呼び出すので、不要を負いませんので

内部遷移は、ルート上にmodelフックをトリガしません。すでにモデルを通過しました。

ブレークポイントが起動されないため、findが呼び出されていない（そうしないでください）理由があります。

私はあなたの問題を見つけるのに十分な情報がありませんが、ページリフレッシュが機能し、内部遷移がないと推測すると、transitionToに渡されたオブジェクト間に矛盾があります。 modelフックから返されるもの。

modelフックで返されたオブジェクトと同じオブジェクトをtransitionToに渡す必要があります。

あなたがやっている場合：

this.get('controller').transitionToRoute('image.index', queue, task, image); 

をし、それが働いていない、何かがおそらくあなたが渡しているqueue、task、またはimageモデルのどちらかが間違っています。

ので、この：問題がある場合、それは可能性があるため

var task = //assume this value exists; 
    var queue = //assume this value exists; 
    var image = //assume this value exists; 

は非常に有用ではありません。