Question

我的Router基本上如下所示：

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

由于我希望将post和post/edit模板都渲染到同一个{{outlet}}中，因此我已覆盖PostEditRoute（因此{ {1}}照顾这个）。我还需要覆盖renderTemplate以使用model的模型：

PostRoute

我的App.PostEditRoute = Ember.Route.extend({ model: function() { return this.modelFor('post'); }, deactivate: function() { this.currentModel.get('transaction').rollback(); }, renderTemplate: function() { this.render({ into: 'posts' }); } });模板包含取消链接，我想要重定向＆＃39;回到post/edit视图。

post

但这就是故障开始的地方：点击取消链接会显示一个空白区域i.o. <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>模板。

我还尝试将一个参数传递给post助手（#linkTo）;确实会显示#linkTo post this模板，但在返回post时会导致Uncaught RangeError: Maximum call stack size exceeded错误。

我的问题：如何在取消post/edit时导航回post？

Answer 1

我发现只有在嵌套UI时才能始终嵌套我的资源和路由。

当他们的用户界面没有嵌套时，edit嵌套在post下会让你与Ember作斗争，这会导致你出现问题而不允许你利用约定。

由于edit视图嵌套在posts内，为什么不将edit嵌套在posts中。

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');
  });
});

当我更新路线时，我能够删除大量的样板代码。

这是工作小提琴：http://jsfiddle.net/teddyzeenny/uCggc/2/

注意：Uncaught RangeError: Maximum call stack size exceeded正在发生，因为您将this（整个控制器）传递给linkTo帮助程序，而不仅仅是模型（content）。

这已在Ember master中修复，因此在您更新到最新版本之前，请使用{{#linkTo posts.edit content}}

Answer 2

按如下方式定义模型和路由器映射：

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'); 
    });
});

由于您为resource的{{1}}电话提供了一项功能，因此Ember会自动将post重定向到路线/post/:post_id，并使用模板App.PostIndexRoute（详情请参阅这在the official guide中。让我们在这里放置'show'格式。

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/edit

<script type="text/x-handlebars" data-template-name="post/edit"> <h1>Editing post '{{content.id}}'</h1> <label>Text:</label><br/> {{view Ember.TextField valueBinding="content.text"}}<br/> {{#if content.isDirty}} <em>Modified.</em><br/> {{/if}} <button {{action submit}}>Submit</button> <button {{action cancel}}>Cancel</button> </script>模板只不过是一个出口。

post

最后，我们需要处理<script type="text/x-handlebars" data-template-name="post"> {{outlet}} </script>中的submit和cancel操作。

PostEditController

这是jsfiddle。

Ember #linkTo从编辑记录导航回来时显示空白区域

2 个答案: