Ember.js 余烬#链接到从编辑记录返回时显示空白区域

这是对我的建议的后续行动

我的

路由器

基本如下：

App.Router.map(function () {
    this.resource('posts', function () {
        this.resource('post', {
            'path': '/:post_id'
        }, function () {
            this.route('edit');
            this.resource('comments');
            this.resource('trackbacks');
        });
    });
});

App.Post = DS.Model.extend({
    text: DS.attr('string'),
});

App.Router.map(function() {
    this.resource('posts');
    this.resource('post', { path: '/post/:post_id' }, function() {
       this.route('edit'); 
    });
});

由于我希望将我的

post

和

post/edit

模板呈现到相同的

{outlet}

，因此我已经为此覆盖了

postedRoute

（因此，

renderTemplate

）。我需要覆盖

模型

以及使用

后路由

的模型：

App.PostEditRoute = Ember.Route.extend({
    model: function() {
        return this.modelFor('post');
    },
    deactivate: function() {
        this.currentModel.get('transaction').rollback();
    },
    renderTemplate: function() {
        this.render({
            into: 'posts'
        });   
    }
});

我的

post/edit

模板包含一个Cancel链接，我想将该链接“重定向”回

post

视图

<script type="text/x-handlebars" data-template-name="post/edit">
    {{view Em.TextField valueBinding="title"}}
    {{view Em.TextArea valueBinding="description"}}
    {{#linkTo post}}Cancel{{/linkTo}}
</script>

{{view Em.TextField valueBinding=“title”}
{{view Em.TextArea valueBinding=“description”}
{{{链接到帖子}取消{{/linkTo}

但问题就是从这里开始的：单击取消链接将显示一个空白区域i.o.

post

模板

我还尝试将一个参数传递给

#linkTo

助手（

#linkTo post this

）；这确实显示了

post

模板，但会导致

未捕获范围错误：返回
post/edit
时超过了最大调用堆栈大小

我的问题：取消发布/编辑时，我如何导航回
post
？
我发现最好总是嵌套我的资源和路由，只要它们的UI是嵌套的

当用户界面未嵌套时，在
post
下嵌套
edit
，将使您与余烬抗争，这将给您带来问题，并且不允许您利用约定

既然
edit
视图嵌套在
posts
中，为什么不在
posts
中嵌套
edit

this.resource('posts', { path: '/' }, function () {
  this.route('edit', { path: '/post/:post_id/edit'});
  this.resource('post', {
    'path': '/:post_id'
  }, function () {
    this.resource('comments');
    this.resource('trackbacks');
  });
});

当我更新路由时，我能够删除很多样板代码

这是工作小提琴：

注意：
未捕获范围错误：超出了最大调用堆栈大小
，因为您正在将整个控制器的
此
传递到
链接
帮助程序，而不仅仅是模型（
内容
）

这是在Ember master中修复的，因此在更新到最新版本之前，请使用
{{{{{linkTo posts.edit content}}
按如下方式定义模型和路由器映射：

App.Router.map(function () {
    this.resource('posts', function () {
        this.resource('post', {
            'path': '/:post_id'
        }, function () {
            this.route('edit');
            this.resource('comments');
            this.resource('trackbacks');
        });
    });
});

App.Post = DS.Model.extend({
    text: DS.attr('string'),
});

App.Router.map(function() {
    this.resource('posts');
    this.resource('post', { path: '/post/:post_id' }, function() {
       this.route('edit'); 
    });
});

由于您为
资源
调用
发布
，余烬自动将
/post/：post\u id
重定向到路由
App.PostIndexRoute
，模板为
post/index
（更多信息，请参阅此处的“显示”格式）

<script type="text/x-handlebars" data-template-name="post/index">
    <h1>Post '{{content.id}}'</h1>
    <p>text: {{content.text}}</p>    
    <p>{{#linkTo 'post.edit' content}}Edit{{/linkTo}}</p>
    <p>{{#linkTo 'posts'}}Back to index{{/linkTo}}</p>
</script>

post
模板只不过是一个出口

<script type="text/x-handlebars" data-template-name="post">
    {{outlet}}
</script>

这是确实有效的。
。但是，我更愿意将
编辑
定义为
发布
的路径，因为我正在修改单个对象。不过，我还没有针对master对其进行测试。