燼應用程序模板類名

Setting tagName on application template in ember js

雖然我同意，回落到傳統視圖插件不能去，這裏也順便我基於bootstrap的CSS被封閉的div所破壞（高度未被設置，準確而言）。

現在不同的方式來實現我需要的是設置封閉div的classNames屬性（如果存在的話），喜歡的話可以與組件來完成：

export default Ember.Component.extend({ 
    classNames: ['container'] 
});

因此我可以申請height:100%，和一切都會好起來的。

更新： 問題不在於組件的封閉div的樣式，而在於主應用程序模板行爲的方式。讓我澄清一下：

application.hbs：

{{outlet}}

其中的渲染路線的模板，例如map.hbs：

{{#tab-navigation-container}}  
    {{top-nav}} 

    {{tab-contentpane model=model}} 

    {{tab-navigation map=true}} 
{{/tab-navigation-container}}

現在，components/tab-navigation-container.js轉變封閉div來包括容器CSS類：

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    classNames: ['container'] 
});

然而，呈現的HTML看起來像這樣：

所以，看似application.hbs提供了另一個div圍繞組件，並且我正在尋找一種方法來獲得

刪除它（只能通過傳統視圖插件實現，如上面的鏈接所述）或
將類名應用於它。

可以這樣做嗎？謝謝！

來源

2015-09-23 Julian Rubisch

您應該將tagName和classNames設置爲您最外面的元素 - 這將保持一致的樣式。例如，假設原本你有：

<section class="container col-md-6"> 
    <div class="col-sm-12 test"> 
    <p>some content...</p> 
    ... 
    </div> 
</section>

您可以創建你的組件是這樣的：

export default Ember.Component.extend({ 
    tagName: 'section', 
    classNames: ['container', 'col-md-6'] 
});

然後你的模板可以排除在外條整

<div class="col-sm-12 test"> 
    <p>some content...</p> 
    ... 
</div>

確實沒有理由爲什麼你的CSS應該通過使用組件來打破。您可以設置之前使用的所有類和標籤，並且CSS應該呈現相同。

如果我誤解了你的問題，請告訴我。

來源

2015-09-23 22:44:41 sbatson5

謝謝！我添加了一些更多的代碼來澄清！ –

好吧，這更多的是一個醜陋的黑客攻擊不是一個實際的解決方案，但目前它的伎倆。我只是回落到普通jQuery的DOM操作，同時覆蓋部分的didInsertElement事件：

export default Ember.Component.extend({ 
    setupFunc: function() {  

     $('#tab-navigation-container').unwrap(); 

    }.on('didInsertElement') 
});

其中tab-navigation-container是組件的ID。

來源

2015-09-24 09:57:42

在餘燼2.7及以下，你可以控制頂層標籤（甚至沒有渲染它），並通過修改您的灰燼應用爲CSS類如下：

// app/app.js 

App = Ember.Application.extend({ 
    ApplicationView: Ember.Component.extend({ 
    classNames: ['my-custom-classname'], 
    // Or to omit the tag entirely: 
    tagName: '', 
    }), 
    // ... 
});

正如this discussion看到。

這並不需要任何黑客或舊插件。

來源

2017-04-10 14:43:33

燼應用程序模板類名

回答

相關問題