0

这是对我之前的问题的跟进。

在这里工作 JSFiddle。

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

由于我希望 mypost和post/edittemplate 都呈现为相同{{outlet}}的 ，因此我覆盖了PostEditRoutefor this （因此renderTemplatewhich 负责处理此问题）。我还需要覆盖model以使用PostRoute's 模型：

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模板包含一个取消链接，我想将其“重定向”回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>

但这就是麻烦开始的地方：单击取消post链接将在模板中显示一个空白区域。

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

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

4

2 回答 2

0

我发现最好总是嵌套我的资源和路由，前提是它们的 UI 是嵌套的。

edit在他们的 UI 未嵌套post时嵌套会使您与 Ember 对抗，这会给您带来问题并且不允许您利用约定。

既然editview 嵌套在里面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}}

于 2013-03-02T12:02:17.900 回答
0

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

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调用提供了一个函数post，Ember 会自动重定向到带有模板/post/:post_id的路由（更多信息请参阅官方指南。让我们将“显示”格式放在这里。App.PostIndexRoutepost/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。

App.PostEditController = Ember.ObjectController.extend({
    content: null,
    submit: function() {
        var post = this.get('content');
        post.get('transaction').commit();
        this.transitionToRoute('post', post);
    },
    cancel: function() {
        var post = this.get('content');
        post.get('transaction').rollback();
        this.transitionToRoute('post', post);
    },
});

这是jsfiddle。

于 2013-03-04T07:47:29.547 回答