Iron-Router：我可以定位一個特定的嵌套模板來顯示我的loading模板嗎？

Question

我在流星項目中使用鐵路由器。我想要做的只是在頁面上的特定嵌套模板（即使用我waitOn正在等待的數據的內容區域）內顯示我的loading模板，而不是像Router.onBeforeAction('loading');那樣代替整個頁面。

是否有可能使用鐵路由器做到這一點？

我的簡化代碼：

的layout.html

<template name="layout"> 
    {{> yield}} 
</template> 

<template name="foo"> 
    //bunch of intro text 
     {{> bar}} 
    //a big CTA 
</template> 

<template name="bar"> 
    {{this.something}} 
</template> 

我想要做的就是與loadingTemplate更換bar模板，直到數據被加載。頁面的其餘部分可以渲染。 這裏的默認方式，當然，顯示loadingTemplate代替整個頁面（如'富「）：

router.js

Router.configure({ 
    layoutTemplate: 'layout', 
    notFoundTemplate: 'notFound', 
    loadingTemplate: 'loading' 
}); 

//Router.onBeforeAction('loading'); //Future SO visitors: use this to show the loading template on all routes, if that's what you desire. I only want to show the loading template on one route. 

this.route('home', { 
    path: '/', 
    action: function() { 
     if (this.ready()) // is there a short-hand version btw? 
     this.render(); 
     else 
     this.render('loading'); 
    }, 
    onBeforeAction: function() { 
     //this.render('loading'); //shouldn't this be the short-hand version? Doesn't work. 
    }, 
    waitOn: function() { 
     return Meteor.subscribe('baz'); 
    }, 
    data: function() { 
     return Baz.find(); 
    } 
    }); 

如果我要找的ISN」 t鐵路由器的可能性，任何建議的替代品是最受歡迎的。謝謝！

對於未來的訪問者，這裏是鐵路由器docs。

Answer 1

完全感謝Geoffrey Booth發送此正確方向。原始問題的完整技術答案如下。簡短的回答是肯定的，可以像Geoffrey提到的那樣使用鐵路路由器來定位特定的嵌套模板。更多涉及的答案：根據您的使用情況，可能會有更好的選擇......請參閱傑弗裏答案的評論以獲得良好的討論。

使用原來的問題的例子的完整工作代碼：

的HTML

<template name="layout"> 
    {{> yield region='header'}} 
    {{> yield region='body'}} 
    {{> yield region='footer'}} 
</template> 

<template name="foo"> 
    //bunch of intro text 
    {{> yield}} 
    //a big CTA 
</template> 

<template name="bar"> 
    {{this.something}} 
</template> 

和路由器

Router.onBeforeAction('loading'); 

Router.map(function() { 
    this.route('home', { 
    path: '/', 
    template: 'bar', 
    layoutTemplate: 'layout', 
    loadingTemplate: 'loading', 
    notFoundTemplate: 'notFound', 
    yieldTemplates: { 
     'myHeader': {to: 'header'}, 
     'myFooter': {to: 'footer'}, 
     'foo': {to: 'body'} 
    }, 
    waitOn: function() { 
     return Meteor.subscribe('baz'); 
    }, 
    data: function() { 
     return Baz.find(); 
    } 
    }); 
}); 

Answer 2

是的，這是可能的。閱讀名爲Using a Layout with Yields的文檔中的部分。基本上你需要做的是向你的佈局模板添加更多的產量，並定義其他子模板進入它們。 '加載'模板只會在主收益中加載。

<template name="layout"> 
    {{> yield region='header'}} 
    {{> yield}} 
    {{> yield region='footer'}} 
</template> 

和

Router.map(function() { 
    this.route('home', { 
    path: '/', 
    template: 'foo', 
    layoutTemplate: 'layout', // This and the following two can also be defined 
    loadingTemplate: 'loading', // in Router.configure like your code does 
    notFoundTemplate: 'notFound', 
    yieldTemplates: { 
     'myHeader': {to: 'header'}, // You need to define the other templates 
     'myFooter': {to: 'footer'} // that will be sent into other yields 
    }, 
    waitOn: function() { 
     return Meteor.subscribe('baz'); 
    }, 
    data: function() { 
     return Baz.find(); 
    } 
    }); 
}); 

在代碼的action和onBeforeAction參數是不必要的;這就是waitOn正在做的事情。