3

Emberアプリケーション構造ガイドを読み、ember.jsを使用して単純な1ページのアプリケーションを作成しようとしています。

私のホームページには、Postオブジェクトのリストを含むサイドバーが表示されます。リストアイテムをクリックすると、サイドバーの右側に、選択したアイテムの読み取り専用バージョンが表示されます。このバージョンには、アイテムを編集できる「編集」ボタンがあります。編集バージョンには、読み取り専用バージョンに戻すための「キャンセル」リンクがあります。

これはすべて機能しましたが、読み取り専用バージョンに戻ると、アドレスバーのURLが正しく更新されません。読み取り専用バージョンに戻ると、URLが「example.com/#posts/123/edit」から「example.com/#posts/123」に変わると思いますが、代わりに「example.com/」が表示されます。 ＃posts /undefined'。

'cancel'イベントでtransitionToを呼び出すときにコンテキストを提供しようとしましたが、機能しません。

URLが適切な投稿（example.com/#posts/123）を指している状態で、読み取り専用に戻るにはどうすればよいですか？

私のコードのほとんどは残り火ガイドの例と同じです。私のルーターと「編集」関連のコードを以下に示します。

App.EditPostView = Em.View.extend({
  templateName: 'edit_post'
});

App.Post = DS.Model.extend({
  title: DS.attr('string'),
  body: DS.attr('string'),
  published: DS.attr('boolean')
});

App.Router = Em.Router.extend({
  enableLogging: true,
  location: 'hash',
  root: Em.Route.extend({
    index: Em.Route.extend({
      route: '/',
      redirectsTo: 'posts.index'
    })
  }),
  posts: Em.Route.extend({
  route: '/posts',  # example.com/#posts
  showPost: Em.Route.transitionTo('posts.show'),
  editPost: Em.Route.transitionTo('posts.edit'),
  index: Em.Route.extend({
    route: '/',
    connectOutlets: function(router) {
    router.get('applicationController').connectOutlet('posts', App.Post.find());
    }
  }),
  show: Em.Route.extend({
    route: '/:post_id', # example.com/#posts/123
    connectOutlets: function(router, post) {
    router.get('postsController').connectOutlet('post', post);
    }
  }),
  edit: Em.Route.extend({
    route: '/:post_id/edit', # example.com/#posts/123/edit
    connectOutlets: function(router, post) {
    router.get('postsController').connectOutlet({
      viewClass: App.EditPostView,
      controller: router.get('postController'),
      context: post
    });
    },
  }),
  cancel: function(router, event) {
    router.transitionTo('show'); # Expect this to use 'example.com/#posts/123' but instead it shows 'example.com/#posts/undefined'
  }
  })
});

# edit_post.handlebars:
  <form {{action save on="submit"}}>
  ...
  {{view Em.TextField valueBinding="title"}}
  {{view Em.TextArea valueBinding="body"}}
  ...
  <a {{action cancel}} class="btn">Cancel</a>
  </form>
4

1 に答える 1

2

transitionTo呼び出しのコンテキストがありません。次のようなものが必要です。

showPost: function (router, event) {
  var post = event.context;
  Em.Route.transitionTo('posts.show', post);
},

editPost: function (router, event) {
  var post = event.context;
  Em.Route.transitionTo('posts.edit', post);
},
于 2012-08-04T19:51:11.357 に答える