2012-07-02 2 views
1

Ember.js 라우팅 예제가 작동하도록 노력하고 있습니다. 나는 게시물 예제로 꽤 잘 돌아가는 바이올린을 가지고있다. 경로가 게시물의 ID로 업데이트되고 올바른 항목이 표시됩니다. 유일한 문제는 게시 URL을 사용하여 콜드 페이지를로드하면 작동하지 않습니다 (포스트보기에 아무 것도 표시되지 않음).엠버 경로 비 직렬화가 부하에서 작동하지 않습니다.

아이디어가 있으십니까? 여기

는 바이올린의 : http://jsfiddle.net/bdennyw/GzYtc/5/

전체 URL과 함께 바이올린 http://jsfiddle.net/bdennyw/GzYtc/5/show/#/posts/1

감사

편집 :

$(function() { 
    App.initialize(App.Router.create()); 
}); 

window.App = Ember.Application.create(); 

App.Post = Ember.Object.extend({ 
    title: null, 
    body: null 
}); 

App.posts = []; 
App.posts.pushObject(App.Post.create({id:'0', title: "Test post 1", body: "How awesome is Ember.js"})); 
App.posts.pushObject(App.Post.create({id:'1', title: "Test post 2", body: "I love working on awesome projects"})); 
App.posts.pushObject(App.Post.create({id:'2', title: "Test post 3", body: "I like cats"})); 

App.ApplicationController = Ember.ObjectController.extend(); 
App.ApplicationView = Ember.View.extend({ 
    templateName: "application_view" 
}); 

App.PostsController = Ember.ArrayController.extend(); 
App.PostsView = Ember.View.extend({ 
    templateName: 'posts_view' 
}); 

App.PostController = Ember.ObjectController.extend(); 
App.PostView = Ember.View.extend({ 
    templateName: 'post_view' 
}); 

App.AboutController = Ember.ObjectController.extend(); 
App.AboutView = Ember.View.extend({ 
    templateName: 'about_view' 
}); 

App.Router = Ember.Router.extend({ 

    root: Ember.Route.extend({ 
     goToPostsIndex: Ember.State.transitionTo('posts.index'), 
     goToAbout: Ember.State.transitionTo('about'), 
     goToShowPost: Ember.State.transitionTo('posts.show'), 

     index: Ember.Route.extend({ 
      route: '/', 
      redirectsTo: "posts.index" 
     }), 

     posts: Ember.Route.extend({ 

      route: '/posts', 
      index: Ember.Route.extend({ 
       route: '/', 
       connectOutlets: function (router) { 
        router.get('applicationController').connectOutlet('posts', App.posts); 
       } 
      }), 
      show: Ember.Route.extend({ 
       route: '/:post_id', 

       connectOutlets: function (router, post) { 
        router.get('postsController').connectOutlet('post', post); 
       }, 
       deserialize: function(router, params) { 

        var id = params.post_id, 
         i = 0; 
        for (i = 0; i < App.posts.length; i += 1) { 
         if (App.posts[i].id === id) { 
          return App.posts[i]; 
         } 
        } 
       }, 
       serialize: function(router, context) { 
        var rtnVal = {}, 
         id = context.get('id'); 
        if (context) { 
         rtnVal = {post_id: id}; 
        } 

        return rtnVal; 
       }, 
      }), 
     }), 

     about: Ember.Route.extend({ 
      route: '/about', 
      connectOutlets: function (router) { 
       router.get('applicationController').connectOutlet('about'); 
      } 
     }) 
    }) 
}); 

+0

내가 connectOutlets : 레벨을 게시물 아래로 이동해야합니다. sly7_7이 아래에서 말했듯이, 인덱스 상태가 건너 뛰었 기 때문에 뷰가 생성되지 않았습니다. – Brian

답변

3
: 아래의 JS 코드 포함

라우터에 enableLogging: true 속성을 추가하면 라우터가 취한 경로를 볼 수 있습니다.

  • 에서 StateManager : 다음을 입력 루트
  • 보내기 이벤트 'navigateAway'상태 루트 페이지를로드 할 때 그래서, 여기에 추적입니다.
  • 'unroutePath'이벤트를 루트로 보냄.
  • 'routePath'이벤트를 루트로 보내는 중입니다.
  • root.posts 입력
  • 'routePath'이벤트를 보내고 root.posts 상태로 만듭니다.
  • root.posts.show 입력
  • 'routePath'이벤트를 보내고 root.posts.show 상태로 보냅니다.

그래서 게시물의 출력을 연결하는 post.index를 통과하지 않습니다. 따라서 게시물을 표시하는보기는 표시되지 않으며 마지막으로 게시물을 표시하는보기는 표시되지 않습니다.

show 상태를 posts.index 상태의 하위로 중첩시킬 수 있으며 작동하지만 개념적으로 올바른지 여부는 알 수 없습니다.

+1

네. 감사! 다음은 업데이트 된 바이올린입니다. http://jsfiddle.net/bdennyw/GzYtc/13/ – Brian

+0

상태 체인이 좋으면, 멋지 네요. –

+0

사실 제가해야 할 일은 connectOutlet을 레벨로 올리는 것뿐입니다. 그것은 내 바보 같은 실수지만, 나는 여전히 Ember와 씨름하고있다. 나는 지금 그것을 얻는다 고 생각한다. – Brian

관련 문제