按照慣例,先作好準備工做,使用Ember CLI命令生成演示所需的文件:html
ember g route customizing-component-element數組
ember g component customizing-component-elementapp
ember g route homeide
ember g route aboutui
默認狀況下,組件會被包裹在div標籤內。好比,組件渲染以後獲得下面的代碼:google
<div id="ember180"> <h1>My Component</h1> </div>
h1標籤就是組件的內容。以「ember」開頭的id和class都是Ember自動生成的。若是你須要修改渲染以後生成的HTML不是被包裹在div標籤,或者修改id和class等屬性值爲自定義的值,你能夠在組件類中設置。spa
默認狀況下,組件會被包裹在div標籤內,若是你須要修改這個默認值你能夠在組件類中指定這個包裹的HTML標籤。設計
// app/components/customizing-component-element.js import Ember from 'ember'; export default Ember.Component.extend({ // 使用tabName屬性指定渲染以後HTML標籤 // 注意屬性的值必須是標準的HTML標籤名 tagName: 'nav' });
下面自定義一個組件。code
<!-- app/templates/components/customizing-component-element.hbs --> <ul> <li>{{#link-to 'home'}}Home{{/link-to}}</li> <li>{{#link-to 'about'}}About{{/link-to}}</li> </ul>
下面是調用組件的模板代碼。注意組件被包裹在那個HTML標籤內,正確狀況下應該是被包裹在nav標籤中。component
<!-- app/templates/customizing-component-element.hbs --> {{customizing-component-element}}
頁面加載以後查看頁面的源代碼。以下:
能夠看到組件customizing-component-element的內容確實是被包裹在nav標籤之中,若是在組件類中沒有使用屬性tagName指定包裹的HTML標籤,默認是div,你能夠把組件類中tagName屬性刪除以後再查看頁面的HTML源碼代碼。
默認狀況下,Ember會自動爲包裹組件的HTML元素增長一個以「ember」開頭的類名,若是你須要增長自定義的CSS類,能夠在組件類中使用className數組屬性指定,能夠一次性指定多個CSS類。好比下面的代碼例子:
// app/components/customizing-component-element.js import Ember from 'ember'; export default Ember.Component.extend({ // 使用tabName屬性指定渲染以後HTML標籤 // 注意屬性的值必須是標準的HTML標籤名 tagName: 'nav', classNames: ['primary', 'my-class-name'] //指定包裹元素的CSS類 });
頁面從新加載以後查看源代碼,能夠看到nav標籤中多了兩個CSS類,一個是primary,一個是my-class-name。
<nav id="ember411" class="ember-view primary my-class-name"> …… </nav>
若是你想根據某個數據的值決定是否增長CSS類也是能夠作到的,好比下面的代碼,當urgent爲true的時增長一個CSS類urgent,不然不增長這個類。要達到這個目的能夠經過屬性classNameBindings設置。
// app/components/customizing-component-element.js import Ember from 'ember'; export default Ember.Component.extend({ // 使用tabName屬性指定渲染以後HTML標籤 // 注意屬性的值必須是標準的HTML標籤名 tagName: 'nav', classNames: ['primary', 'my-class-name'], //指定包裹元素的CSS類 classNameBindings: ['urgent'], urgent: true });
頁面從新加載以後查看源代碼,能夠看到nav標籤中多了一個CSS類urgent,若是屬性urgent的值爲false,CSS類urgent將不會渲染到nav標籤上。
<nav id="ember411" class="ember-view primary my-class-name urgent"> …… </nav>
注意:classNameBindings指定的屬性值必需要跟用於判斷數據的屬性名一致,好比這個例子中classNameBindings指定的屬性值是urgent,用戶判斷是否增長類的屬性也是urgent。若是這個屬性只是駝峯式命名的那麼渲染以後CSS類名將是以中劃線「-」分隔,好比classNameBindings指定一個名爲secondClassName,渲染後的CSS類爲second-class-name。好比下面的演示代碼:
// app/components/customizing-component-element.js import Ember from 'ember'; export default Ember.Component.extend({ // 使用tabName屬性指定渲染以後HTML標籤 // 注意屬性的值必須是標準的HTML標籤名 tagName: 'nav', classNames: ['primary', 'my-class-name'], //指定包裹元素的CSS類 classNameBindings: ['urgent', 'secondClassName'], urgent: true, secondClassName: true });
頁面從新加載以後查看源代碼,能夠看到nav標籤中多了一個CSS類second-class-name。
<nav id="ember411" class="ember-view primary my-class-name urgent second-class-name"> …… </nav>
若是你不想渲染以後的CSS類名被修改成中劃線分隔形式,你能夠值classNameBindings屬性中指定渲染以後的CSS類名。好比下面的代碼:
// app/components/customizing-component-element.js import Ember from 'ember'; export default Ember.Component.extend({ // 使用tabName屬性指定渲染以後HTML標籤 // 注意屬性的值必須是標準的HTML標籤名 tagName: 'nav', classNames: ['primary', 'my-class-name'], //指定包裹元素的CSS類 classNameBindings: ['urgent', 'secondClassName:scn'], //指定secondClassName渲染以後的CSS類名爲scn urgent: true, secondClassName: true });
頁面從新加載以後查看源代碼,能夠看到nav標籤中原來CSS類爲second-class-name的變成了scn。
<nav id="ember411" class="ember-view primary my-class-name urgent scn"> …… </nav>
有沒有感受Ember既靈活又強大!!Ember的設計理念是「約定優於配置」!因此不少的屬性默認的設置都是咱們日常開發中最經常使用的格式。
除了上述能夠指定CSS類名以外,還能夠在classNameBindings增長簡單的邏輯。
// app/components/customizing-component-element.js import Ember from 'ember'; export default Ember.Component.extend({ // 使用tabName屬性指定渲染以後HTML標籤 // 注意屬性的值必須是標準的HTML標籤名 tagName: 'nav', classNames: ['primary', 'my-class-name'], //指定包裹元素的CSS類 classNameBindings: ['urgent', 'secondClassName:scn', 'isEnabled:enabled:disabled'], urgent: true, secondClassName: true, isEnabled: true //若是這個屬性爲true,類enabled將被渲染到nav標籤上,若是屬性值爲false類disabled將被渲染到nav標籤上,相似於三目運算 });
正如代碼的註釋所說的,「isEnabled:enabled:disabled」能夠理解爲一個三目運算,會根據isEnabled的值渲染不一樣的CSS類到nav上。
下面的HTML代碼是isEnabled爲true的狀況,對於isEnabled爲false的狀況請讀者本身試試:
<nav id="ember411" class="ember-view primary my-class-name urgent scn enabled"> …… </nav>
注意:若是用於判斷的屬性值不是一個Boolean值而是一個字符串那麼獲得的結果與上面的結果是不同的,Ember會直接把這個字符串的值做爲CSS類名渲染到包裹的標籤上。好比下面的代碼:
// app/components/customizing-component-element.js import Ember from 'ember'; export default Ember.Component.extend({ // 使用tabName屬性指定渲染以後HTML標籤 // 注意屬性的值必須是標準的HTML標籤名 tagName: 'nav', classNames: ['primary', 'my-class-name'], //指定包裹元素的CSS類 classNameBindings: ['urgent', 'secondClassName:scn', 'isEnabled:enabled:disabled', 'stringValue'], urgent: true, secondClassName: true, isEnabled: true, //若是這個屬性爲true,類enabled將被渲染到nav標籤上,若是屬性值爲false類disabled將被渲染到nav標籤上,相似於三目運算 stringValue: 'renderedClassName' });
此時頁面的HTML源碼就有點不同了。'renderedClassName'做爲CSS類名被渲染到了nav標籤上。
<nav id="ember411" class="ember-view primary my-class-name urgent scn enabled renderedClassName"> …… </nav>
對於這點須要特別注意。Ember對於Boolean值和其餘值的判斷結果是不同的。
在前面兩點介紹了包裹組件的HTML元素的標籤名、CSS類名,在HTML標籤上出來CSS類另一個最經常使用的就是屬性,那麼Ember一樣提供了自定義包裹HTML元素的屬性的方法。使用attributeBindings屬性指定,這個屬性的屬性方式與classNameBindings基本一致。
爲了與前面的例子區別開新建一個組件link-items,使用命令ember g component link-items建立。
<!-- app/templates/components/link-items.hbs --> 這是個組件
在模板中調用組件。
<!-- app/templates/customizing-component-element.hbs --> {{customizing-component-element}} <br><br> {{link-items}}
下面設置組件類,指定包裹的HTML標籤爲a標籤,並增長一個屬性href。
// app/components/link-items.js import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'a', attributeBindings: ['href'], href: 'http://www.google.com.hk' });
頁面從新加載以後獲得以下結果:
比較簡單,對於渲染以後的結果我就不過多解釋了,請參考classNameBindings屬性理解。
到此,有關於組件渲染以後包裹組件的HTML標籤的相關設置介紹完畢。內容很少,classNameBindings和attributeBindings這兩個屬性的使用方式基本相同。
若有疑問歡迎給我留言或者直接查看官方教程。