11

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

モデルは非常にシンプルで、キュー、タスク、イメージの 3 つのモデルがあります。すべてのルートに動的 URI セグメントを使用しており、これらのモデルのルートは:queue_id/:task_id/:image_id の形式でネストされています。

ルートは次のように構成されます。

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

HTML のどこかに、タスクのすべての画像を反復処理するためのこの単純なテンプレートがあります。

{{#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 に状態の変化は見られません。また、ブレークポイントを置いた行がトリガーされていないようです。しかし、ページを更新すると、うまく機能します。

移行コードに何か問題がありますか?

ありがとう。

4

1 に答える 1