Question

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

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

在父插座内渲染编辑模板会破坏层次结构，后退/取消按钮不会重新呈现列表。所以它似乎需要成为列表的子项（并在列表模板的出口中呈现），但它必须隐藏列表模板而不隐藏它自己。

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

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

希望这是有道理的。

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

1 个答案: