Ember.js 入門指南——自定義包裹組件的HTML標籤

按照慣例,先作好準備工做,使用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」開頭的idclass都是Ember自動生成的。若是你須要修改渲染以後生成的HTML不是被包裹在div標籤,或者修改idclass等屬性值爲自定義的值,你能夠在組件類中設置。spa

 

1,自定義包裹組件的HTML標籤

       默認狀況下,組件會被包裹在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源碼代碼。

 

2,自定義包裹組件的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類也是能夠作到的,好比下面的代碼,當urgenttrue的時增長一個CSSurgent,不然不增長這個類。要達到這個目的能夠經過屬性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標籤中多了一個CSSurgent,若是屬性urgent的值爲falseCSSurgent將不會渲染到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標籤中多了一個CSSsecond-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代碼是isEnabledtrue的狀況,對於isEnabledfalse的狀況請讀者本身試試:

<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值和其餘值的判斷結果是不同的。

 

3,自定義包裹組件的HTML元素的屬性

       在前面兩點介紹了包裹組件的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標籤的相關設置介紹完畢。內容很少,classNameBindingsattributeBindings這兩個屬性的使用方式基本相同。

若有疑問歡迎給我留言或者直接查看官方教程

相關文章
相關標籤/搜索