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

Question

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

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

在父级插座中渲染 Edit 模板会破坏层次结构，并且后退/取消按钮不会重新渲染列表。所以看起来它需要是列表的子项（并在列表模板的出口中呈现），但它必须隐藏列表模板而不隐藏自身。

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}}。

这样，您的 index 和 edit 模板都是 person 资源的子模板，应该加载到 person 模板的 {{outlet}} 而不是 person.index {{outlet}} 中。

希望这是有道理的。