Question

我正在尝试让Ember.js路由示例正常工作。我有一个小提琴运行相当好的帖子示例。路线使用帖子的ID更新并显示正确的项目。唯一的问题是，如果您使用post url加载页面冷，它不起作用（在posts视图中不显示任何内容）。

有什么想法吗？

这是小提琴：http://jsfiddle.net/bdennyw/GzYtc/5/

和完整网址的小提琴 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');
            }
        })
    })
});

Answer 1

通过将enableLogging: true属性添加到路由器，您可以看到路由器采用的路由。因此，在加载页面时，这里是跟踪：

STATEMANAGER：输入root
将事件'navigateAway'发送到州根。
将事件'unroutePath'发送到州根。
将事件'routePath'发送到州根。
输入root.posts
将事件'routePath'发送到state root.posts。
输入root.posts.show
将事件'routePath'发送到状态root.posts.show。

所以它不会通过post.index来连接帖子的出口。因此，没有显示负责diplaying帖子的视图，最后，没有显示负责显示帖子的视图。

您可以将show状态嵌套为posts.index状态的子级，并且它可以正常工作，但我不知道它在概念上是否正确。

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

1 个答案: