1

Ember.js ルーティングの例を機能させようとしています。私は投稿の例でかなりうまく動作しているフィドルを持っています。ルートは投稿の ID で更新され、正しいアイテムが表示されます。唯一の問題は、投稿の URL を使用してページをコールドでロードすると機能しないことです (投稿ビューに何も表示されません)。

何か案が？

これがフィドルです：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');
            }
        })
    })
});

</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 に答える