Ember customizes the HTML label for the package component

As a rule, get ready and use the Ember CLI command to generate the files you need for your presentation:

ember g route customizing-component-element
ember g component customizing-component-element
ember g route home
ember g route about

By default, components are div label. For example, after the component is rendered, you get the following code:

<div id="ember180" class="ember-view">
  <h1>My Component</h1>
</div>

h1 is the content of the component. B oth ember id class are automatically generated by Ember. If you need to modify the HTML generated after rendering is not div label, id such as id class to be custom values, you can set it in the component class.

1, custom package component HTML label

By default, a component is div label, and if you need to modify this default, you can specify the HTML label for the package in the component class.

//  app/components/customizing-component-element.js
import Ember from 'ember';
export default Ember.Component.extend({
    // 使用tabName属性指定渲染之后HTML标签
    // 注意属性的值必须是标准的HTML标签名
    tagName: 'nav'
});

Customize a component below.

<ul>
    <li>{{#link-to 'home'}}Home{{/link-to}}</li>
    <li>{{#link-to 'about'}}About{{/link-to}}</li>
</ul>

The following is the template code for calling the component. Note that the component is wrapped in that HTML label and, correctly, should be wrapped in nav label.

{{customizing-component-element}}

Look at the source code of the page after it is loaded. As follows:

You can customizing-component-element are indeed nav label, and if the HTML label for the package is not specified in the component class using the property tagName div can delete the tagName the component class and then view the HTML source code of the page.

2, customize the class name of the HTML element of the package component

By default, Ember automatically adds a class name that starts ember to the HTML element of the package component, and if you need to add a custom CSS class, className properties, and you can specify multiple CSS classes at once. For example, the following code example:

//  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类
});

After the page reloads, you can nav are two more CSS classes in the nav primary one my-class-name

……

If you want to decide whether to add a CSS class based on the value of a data, such true class urgent when the urgent is urgent otherwise you do not increase the class. To do this, you can set 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
});

After the page reloads the source code, nav is an additional CSS class urgent in the nav urgent if the value urgent false the CSS urgent not render on the nav label.

……

Note: classNameBindings be consistent with the property name used to determine the data, for classNameBindings is urgent and the user determines whether to add a urgent I f this property is only hump-named then the rendered CSS class name will be - for classNameBindings name secondClassName and the second-class-name For example, the following demo code:

//  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
});

After the page is reloaded, look at nav and you can see that there is an additional CSS class second-class-name

……

If you do not want the post-render CSS class name to be modified to be inline separated form, you can specify the post-rendered CSS class name in the classNameBindings property. For example, the following code:

//  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
});

After the page is reloaded and you look nav you can see that the original CSS class in the nav tag was second-class-name scn

……

Does it feel like Ember is flexible and powerful!! er's design philosophy is "Convention is better than configuration"! So many of the default settings for properties are the most common formats we normally develop.

In addition to the CSS class names that can be specified classNameBindings especially when dealing with some dynamic effects.

//  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标签上，类似于三目运算
});

As the code notes, isEnabled:enabled:disabled as a three-eye operation that isEnabled nav based on the value of isEnabled.

The following HTML code is true true isEnabled and for cases isEnabled false let the reader try it out for themselves:

……

Note: If the property value used to determine is Boolean value but a string and the result is different from the result above, Ember renders the value of the string directly to the package label as the CSS class name. For example, the following code:

//  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'
});

At this point the HTML source code of the page is a little different. renderedClassName rendered on the nav label as a nav class name.

……

Special attention needs to be paid to this point. Ember's judgment of the Boolean value and other values is different.

3, customize the properties of the HTML elements of the package component

Ember also provides a way to customize the properties of package HTML elements by introducing the label name of the HTML element of the package component, the CSS class name, and the other most commonly used property of the CSS class on the HTML tag. S pecified attributeBindings property, the properties of this property are classNameBindings To distinguish it from the previous example, create a new link-items ember g component link-items

这是个组件

The component is called in the template.

{{customizing-component-element}}
<br><br>
{{link-items}}

Set the component class below, specify that the HTML label for the a label, and add 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'
});

When the page reloads, you get the following results:

It's simpler, and I'll explain the results after rendering more, classNameBindings

At this end, there is an introduction to the HTML labeling of the packaged component after the component is rendered. T here is not classNameBindings and attributeBindings used in much the same way. I f you have any questions, please leave me a message or check the official tutorial directly.

The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!