Ember路由反序列化不能在加載工作

我試圖讓Ember.js路由示例工作。我有一個小提琴與帖子示例運行得很好。路線以帖子的ID更新並顯示正確的項目。唯一的問題是，如果您使用發佈url加載頁面冷，它不起作用（不會在帖子視圖中顯示任何內容）。Ember路由反序列化不能在加載工作

有什麼想法？

這裏的小提琴：http://jsfiddle.net/bdennyw/GzYtc/5/

，並與完整的URL小提琴 http://jsfiddle.net/bdennyw/GzYtc/5/show/#/posts/1

感謝

編輯：包括下面的JS代碼：

$(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'); 
      } 
     }) 
    }) 
});

來源

2012-07-02 Brian

我應該已經移動connectOutlets：向下發佈一個級別。正如sly7_7所述，視圖沒有被創建，因爲索引狀態被跳過了。 – Brian

通過將enableLogging: true屬性添加到路由器，您可以看到路由器採用的路由。所以加載頁面的時候，這裏是跟蹤：

STATEMANAGER：進入根
發送事件「navigateAway」國家根源。
將事件'unroutePath'發送到狀態根。
將事件'routePath'發送到狀態根。
正在輸入root.posts
發送事件'routePath'爲root.posts狀態。
輸入root.posts.show
將事件'routePath'發送到狀態root.posts.show。

所以它不會通過post.index連接你的帖子的出口。因此，沒有顯示負責帖子的視圖，最後，沒有顯示負責顯示帖子的視圖。

您可以將show狀態嵌套爲posts.index狀態的子狀態，它可以工作，但我不知道它在概念上是否正確。

來源

2012-07-02 07:53:24

沒錯，就是這樣。謝謝！這裏是更新的小提琴http://jsfiddle.net/bdennyw/GzYtc/13/ – Brian

如果狀態鏈接對你有好處，那麼它很棒:) –

其實我只需要將connectOutlets升級到帖子。這是我的一個愚蠢的錯誤，但我仍然在與Ember拼殺，我想我現在明白了。 – Brian

Ember路由反序列化不能在加載工作

回答

相關問題