Question

如何将默认内容渲染到嵌套出口？

例如，如果我有一个索引模板，例如：

<script type="text/x-handlebars" id="index">
    <div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" id="photo">
    Photo!
</script>

<script type="text/x-handlebars" id="default">
    Default photo
</script>

嵌套路线：

App.Router.map(function() {
    this.resource('index', { path: '/'}, function() {
        this.resource('default');
        this.resource('photo', { path: ':id' });
    });
});

当我使用链接到帮助程序将页面加载到插座时，它工作正常。但是，我无法弄清楚如何在首次加载页面时将默认内容呈现到插座中。

如果我这样做：

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this._super(controller, model);
        this.render('default');
    },
});

它将默认内容呈现到主插座中。如果我尝试指定一个命名的插座：

this.render('default', { outlet: 'centre' });

我收到以下错误消息：

处理路径时出错：index.index断言失败：指定了插座（中心）但未找到。错误：断言失败：指定了插座（中心）但未找到。

即使使用指定的插座：

{{outlet "centre"}}

任何帮助表示感谢。

Answer 1

删除索引资源，它已经为您创建，会让事情变得混乱。另外，如果您需要在游戏的早期挂钩renderTemplate，那么您可能不会遵循Ember的惯例。

我还建议删除default资源，因为Ember通过索引提供。顶部模板是application.hbs，其中基本上只有{{outlet}}。总结如下：

删除索引模板
将id =“default”更改为id =“index”
从路由器地图中删除索引资源

Answer 2

谢谢大家，我使用了oshikryu的解决方案。

模板：

<script type="text/x-handlebars" id="index">
    <div>{{outlet}}</div>
</script>

<script type="text/x-handlebars" id="photo">
    Photo!
</script>

<script type="text/x-handlebars" id="default">
    Default photo
</script>

JavaScript的：

App.Router.map(function() {
    this.resource('index', { path: '/'}, function() {
        this.resource('photo', { path: ':id' });
    });
});

App.IndexIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('default');
    }
});

Ember.js将默认内容渲染到嵌套出口

2 个答案: