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>