Ember模板链接 [英] Ember template chaining

问题描述

我有这个HTML / Handlebars代码，我想要的是出口fav呈现
具有idfav的模板及其相应的出口/模板链与预期的索引。 Kinda喜欢显示不同的Ember URL作为索引的一部分。是否可能本机（没有补充一个iframe，我认为是一个坏主意）？会被认为是一个很好的做法（我知道使用意见可能有帮助，但只是想知道是否可以走这条路）？

 < script type =text / x-handlebarsid =application> 
这里我们有我们的应用程序
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsid =index> 
应用程序的第一个孩子
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsid =index / index> 
您的收藏
 {{outlet fav}} 
< / script> 
 
< script type =text / x-handlebarsid =fav> 
 {{＃link-to'fav'}}全部{{/ link-to}}<！ - 链接A  - > 
 {{＃link-to'fav.top'}}顶部{{/ link-to}}<！ - 链接B  - > 
 
<！ - fav / index的预期输出 - > 
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsid =fav / index> 
所有收藏夹内容
< / script> 
 
< script type =text / x-handlebarsid =fav / top> 
最喜爱的内容
< / script> 
 
< script type =text / x-handlebarsid =football> 
足球内容
< / 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显示内容的孩子出口
 
帮助欣赏。 
 

解决方案

您可以在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/

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

I have this HTML/Handlebars code, what I would like is for the "outlet fav" to render the template with id "fav" and its corresponding outlet/templates-chain with expected "index". Kinda like displaying a different Ember URL as a part of the index. Is it possible natively(Without supplementing an iframe, which I think is a bad idea)? would it be considered a good practice(I know using views might help but just wondering if it is ok to walk this road)?

<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 Code: Here's what I tried

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'});
    }
});

Output:
===================================
Here we have our application
Application's First Child
Your Favourites
Link A
Link B
===================================

Omits the child outlet which should display content from "fav/index"

Help Appreciated.

解决方案

You can add an additional render call in 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/

Also, you may certainly use views as well to achieve similar results.

这篇关于Ember模板链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！