ember.js - 如何在 EmberJS 中创建到整页新建/编辑模板的路由

Question

我有一个列表 Controller ，其中每个元素都有编辑链接。如何将编辑模板呈现为整页？

一个常见的用例是表单页面很大，将其呈现在列表下方(列表也可能很长)是没有意义的。

在父级导出内渲染编辑模板会破坏层次结构，并且后退/取消按钮不会重新渲染列表。因此，它似乎需要成为列表的子级(并在列表模板的导出中呈现)，但它必须隐藏列表模板而不隐藏自身。

Answer 1

在构建玩具应用程序时，我多次遇到过这个“问题”。我的解决方案是为资源添加一个模板。例如，如果您正在构建地址簿，您当前的问题/解决方案如下所示:

App.Router.map(function() {
  this.resource('person', { path: '/person' }, function() {
    this.route('index', { path: '/' });
    this.route('edit', { path: '/:person_id/edit' });
  });
});

您的模板可能如下所示:

<script type="text/x-handlebars" data-template-name="person/index">
    <ul>
        {{#each model}}
            <li>{{name}} - {{#linkTo person.edit this}}Edit{{/linkTo}}</li>
        {{/each}}
    </ul>

    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="person/edit">
    {{#each model}}
        {{view Ember.TextField valueBinding="name"}}
    {{/each}}
</script>

要停止在索引路由的路由器中渲染编辑模板，您需要添加模板:

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

并从 person.index 模板中删除 {{outlet}}。

这样，您的索引和编辑模板都是 person 资源的子级，并且应该加载到 person 模板的 {{outlet}} 中，而不是加载到 person.index {{outlet}} 中。

希望这是有道理的。