1

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

任何的想法？

这是小提琴：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');
            }
        })
    })
});

​</p>

4

1 回答 1

3

通过将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-02T07:53:24.240 回答