Ember template without div wrapper

語義UI（HTML5組件庫）提供Sitebar組件，它需要直接在<body>之下的特定頁面結構。Ember template without div wrapper

由於Ember引入了HTMLBars，所以在將其注入DOM之前，它會將所有模板的內容封裝在另一個<div>標籤中，例如，

<div id="ember389" class="ember-view"><!-- original template's content comes here --></div>

這使得使用上述Sitebar和類似的組件幾乎不可用。

對於較老的Ember版本，也有類似的問題，但他們的答案不再有效，因爲Views已經退役。 Ember仍然爲「沒有包裝的模板」提供私人_MetamorphView類，但除了它也被棄用的事實之外，我現在不會如何將它們合併到我的Route中。

任何幫助，非常感謝！

來源

2015-09-14 Phil Rykoff

PS：我甚至會復活好老的Metamorph script標籤！（： –

）如果這是一個Ember組件，你可以將'tagName：「」'放在組件的.js文件中，它不會在你的模板周圍生成一個div，最終你不需要這樣做，但這是現在的解決方法 –

這實際上並不像你想象的那麼難。所有你需要的是在component做一些細微的改變。（假設您使用Ember 2.x並且想將側欄作爲組件）

例如，

// app/components/side-bar.js 
export default Ember.Component.extend({ 
    classNames: ['ui', 'sidebar'] 
}); 

// app/templates/components/side-bar.hbs 
{{yield}} 

// usage 
// app/templates/application.hbs 
{{#side-bar}} 
    // your sidebar contents go here 
{{/side-bar}} 
<div class="pusher"> 
    // Your site's actual content 
    {{outlet}} 
</div>

如果側欄是沒有必要成爲一個組成部分，那麼它會簡單得多

// app/templates/application.hbs 
<div class="ui sidebar"> 
    // ... 
</div> 
<div class="pusher"> 
    // Your site's actual content 
    {{outlet}} 
</div>

編輯 - 答案的評論

側邊欄可以初始化在任何元素內部，而不僅僅是頁面的主體。

http://semantic-ui.com/modules/sidebar.html#using-a-custom-context

來源

2015-09-14 12:18:43

謝謝！:-)這是我的理解，路線的模板（其中可能包括組件），例如'application.hbs'，在導入到index.html時已經被封裝在div中。有沒有一種方法可以避免這種情況，或者直接將組件包含到'index.html'中以便從您的解決方案中受益？ –

檢查我的編輯@PhilRykoff –

您的編輯爲我工作，再次感謝！ –

您可以使用以下方法：

import Ember from 'ember'; 
 

 
export default Ember.Component.extend({ 
 

 
    /** 
 
    * No default div around the element. 
 
    */ 
 
    tagName: '' 
 

 
});

來源

2016-09-12 06:53:28 Sabo

Ember template without div wrapper

回答

相關問題