Ember 模板链接答案

【问题标题】：Ember template chainingEmber 模板链接
【发布时间】：2013-10-08 12:25:01
【问题描述】：

我有这个 HTML/Handlebars 代码，我想要“outlet fav”渲染 id 为“fav”的模板及其对应的带有预期“index”的出口/模板链。有点像在索引中显示不同的 Ember URL。是否可以原生（不补充 iframe，我认为这是一个坏主意）？这会被认为是一种好的做法吗（我知道使用视图可能会有所帮助，但只是想知道走这条路是否可以）？

<script type="text/x-handlebars" id="application">
    Here we have our application
    {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
    Application's First Child
    {{outlet}}
</script>

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

<script type="text/x-handlebars" id="fav">
    {{#link-to 'fav'}}All{{/link-to}}       <!-- Link A-->
    {{#link-to 'fav.top'}}Top{{/link-to}}   <!-- Link B-->

    <!-- Expected Output from "fav/index" -->
    {{outlet}}
</script>

<script type="text/x-handlebars" id="fav/index">
     All Favourites Content
</script>

<script type="text/x-handlebars" id="fav/top">
    Top Favourites Content
</script>

<script type="text/x-handlebars" id="football">
    Football Content
</script>

JS 代码：这是我尝试过的

App.Router.map(function(){
    this.resource('index', {path: '/'}, function(){
        this.resource('fav', function(){
            this.route('top');
            this.route('last');
        });
    });
    this.route('football');
});
App.IndexIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render();
        this.render("fav", {into: 'index'});
    }
});

输出： ==================================== 在这里我们有我们的应用程序应用程序的第一个孩子你的最爱链接 A 链接 B ==================================== 省略应显示“fav/index”内容的子插座帮助赞赏。

【问题讨论】：

标签： javascript html ember.js handlebars.js

【解决方案1】：

您可以在 IndexIndexRoute 添加额外的渲染调用，

App.IndexIndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render();
        this.render("fav", {into: 'index'});
        this.render("fav/index", {into: 'fav'});
    }
});

http://jsfiddle.net/7b8HT/

此外，您当然也可以使用视图来获得类似的结果。

【讨论】：