Ember.js Getting Started Guide--Customizing the HTML tags for package components

in accordance with the usual practice, first prepare for the work, use The Ember CLI command generates the required files for the demo:

Ember G Route Customizing-component-element

Ember G Component Customizing-component-element

Ember G Route Home

Ember G Route About

By default, components are wrapped within div tags. For example, after the component is rendered, the following code is obtained:

<div id= "ember180" > 
 
 
The H1 tag is the content of the component. IDs and classes that begin with "Ember"  are automatically generated by Ember. If you need to modify the generated HTML after rendering is not wrapped in the div tag, or modify the value of the attribute such as ID and class as custom values, you can set it in the component class. 
 
 1, custom Packagescomponent'sHtmllabel 
 By default, the component is wrapped in a div tag, and if you need to modify the default value, you can specify the HTML tag of the package in the component Class  . 
 
App/components/customizing-component-element.js import Ember from ' Ember '; Export Default Ember.Component.extend ({//Use the TabName property to specify that the value of the HTML tag//Note property After rendering must be a standard HTML tag name tagName: ' Nav ' });
 
 
customize a component below. 
 
<!--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>
 
 
The following is the template code for the calling component. Note that the component is wrapped in the HTML tag and should be wrapped in the nav tag correctly . 
 
<!--App/templates/customizing-component-element.hbs-to {customizing-component-element}}
 
View the source code of the page after the page loads. as follows:
 
 
you can see that the contents of the component customizing-component-element are indeed wrapped in a nav tag, if the attribute is not used in the component class TagName the specified package HTML tag, the default is div, you can remove the TagName attribute in the component class and then view the HTML source code of the page . 
 
 2, custom Packagescomponent'sHtmlthe class name of the element 
by default, Ember automatically adds a class name that begins with "Ember" for the HTML element of the package component , and if you need to add a custom CSS class, you can use it in the component class ClassName The array property specifies that you can specify multiple CSS class. For example, the following code example:
 
App/components/customizing-component-element.js import Ember from ' Ember '; Export Default Ember.Component.extend ({//Use the TabName property to specify that the value of the HTML tag//Note property After rendering must be a standard HTML tag name tagName: ' Nav ' , classnames: [' primary ', ' my-class-name ']//CSS class for the specified package element});
 
 
page Reload after viewing the source code, you can see the nav label more than two CSS classes, one is primary, one is my-class-name. 
 
<nav id= "ember411" class= "Ember-view primary My-class-name" >......</nav>
 
 
          If you want to decide whether to increase the  css   urgent   Span style= "font-size:16px;font-family: ' Times New Roman '" >true   , add a  css   urgent   classnamebindings   set. 
 
//  app/components/ customizing-component-element.js import ember from  ' Ember '; export default  Ember.Component.extend ({       //  use TabName property to specify HTML tags after rendering         //  Note the value of the attribute must be the standard HTML tag name        tagname:   ' nav ',        classnames: [' primary ',  ' my-class-name '],   //the CSS class that specifies the package element        classnamebindings: [' urgent '],        urgent: true}); 
 
after the page reloads to view the source code, you can see that the nav tag has one more CSS class Urgent, if the property urgent value is false, the CSS class urgent will not be rendered to the nav label. 
 
<nav id= "ember411" class= "Ember-view primary my-class-name Urgent" >......</nav>
 
   note:   classnamebindings The specified property value must be consistent with the property name used to determine the data, such as  classnamebindings Urgent urgent css"-" For example  classnamebindings Specifies a name of  Secondclassname , after rendering the  Css second-class-name 
 
App/components/customizing-component-element.js import Ember from ' Ember '; Export Default Ember.Component.extend ({//Use the TabName property to specify that the value of the HTML tag//Note property After rendering must be a standard HTML tag name tagName: ' Nav '       , classnames: [' primary ', ' my-class-name '],//The CSS class that specifies the package element classnamebindings: [' urgent ', ' secondclassname '], Urgent:true, secondclassname:true});
 
 
after the page reloads to view the source code, you can see that the nav tag has one more CSS class Second-class-name. 
 
<nav id= "ember411" class= "Ember-view primary my-class-name urgent Second-class-name" >......</nav>
 
 
If you don't want to render the following The CSS class name is modified to be in an underscore delimited form, and you can specify the CSS class name after rendering in the value Classnamebindings property . For example, the following code:
 
App/components/customizing-component-element.js import Ember from ' Ember '; Export Default Ember.Component.extend ({//Use the TabName property to specify that the value of the HTML tag//Note property After rendering must be a standard HTML tag name tagName: ' Nav ' , classnames: [' primary ', ' my-class-name '],//CSS class that specifies the package element classnamebindings: [' urgent ', ' SECONDCLASSNAME:SCN ' ],//Specifies the CSS class named SCN urgent:true, secondclassname:true} after rendering secondclassname;
 
 
after the page reloads to view the source code, you can see that the original CSS class in the nav tag becomes the SCN for second-class-name. 
 
<nav id= "ember411" class= "Ember-view primary my-class-name urgent SCN" >......</nav>
 
 
There's no feeling Ember is both flexible and powerful!! Ember 's design concept is " contract better than configuration "! So many of the default settings for properties are the most commonly used formats in our usual development. 
 
         In addition to the above you can specify  CSS  classnamebindings
 
//  app/components/ customizing-component-element.js import ember from  ' Ember '; export default  Ember.Component.extend ({       //  use TabName property to specify HTML tags after rendering         //  Note the value of the attribute must be the standard HTML tag name        tagname:   ' nav ',        classnames: [' primary ',  ' my-class-name '],   //the CSS class that specifies the package element        classnamebindings: [' urgent ',  ' Secondclassname:scn ',  ' isEnabled:enabled:disabled '],       urgent:  true,       secondClassName: true,        isenabled: true  //If this property is true, the class enabled will be rendered to the Nav label, and if the property value is False the class disabled will be rendered to the Nav label, Similar to three mesh operation}); 
 
as the code notes say,"isEnabled:enabled:disabled" can be understood as a three-mesh operation that renders different CSS classes according to the value of isenabled to  on NAV. 
 
the following The HTML code is isenabled true , and for the case  of false isenabled, readers should try it yourself: 
 
<nav id= "ember411" class= "Ember-view primary my-class-name urgent SCN enabled" >......</nav>
 
 
   note:    If the attribute value used to judge is not a  Boolean value instead of a string the resulting result is not the same as the result above,  ember css 
 
  app/components/customizing-component-element.js import Ember from  ' Ember ';  export default ember.component.extend ({       //  Use the TabName property to specify the HTML tag after rendering        //  Note that the value of the attribute must be a standard HTML tag name         tagName:  ' nav ',        classnames: [' Primary ',  ' my-class-name '],  //specify CSS classes for package elements         classnamebindings: [' urgent ',  ' secondclassname:scn ',  ' isEnabled:enabled:disabled ',  ' StringValue '],       urgent: true,        secondclassname: true,       isenabled: true,  // If this property is True, class enabled will be rendered to the Nav label, and if the property value is False the class disabled will be rendered to the Nav label, similar to the three mesh operation         stringValue:  ' Renderedclassname‘}); 
 
 At this point the HTML source of the page is a bit different. ' Renderedclassname ' is rendered to the nav label as a CSS class name . 
 
<nav id= "ember411" class= "Ember-view primary my-class-name urgent SCN enabled Renderedclassname" >......</nav>
 
 
special attention is needed for this. Ember  is not the same for Boolean values and other values. 
 
 3, custom Packagescomponent'sHtmlattributes of the element 
The package assembly is described in the previous two points HTML element tag name,CSS class name, on the HTML tag out of the CSS class the other most commonly used is the attribute, then Ember also provides a custom package html The method for the attribute of the element. Use the Attributebindings property to specify that the property is in the same way as classnamebindings . 
 
to differentiate from the previous example, create a new component Link-items, using the command Ember G component Link-items . 
 
<!--App/templates/components/link-items.hbs--and this is a component
 
Calls the component in the template.
 
<!--App/templates/customizing-component-element.hbs-to {customizing-component-element}}<br><br > {{Link-items}}
 
 
set the component class below to specify the package's The HTML tag is a tag, and an attribute href is added. 
 
App/components/link-items.js import Ember from ' Ember '; Export Default Ember.Component.extend ({tagName: ' A ', attributebindings: [' href '], href: ' Http://www.goo GLE.COM.HK '});
 
 
after the page reloads, the following results are obtained:
 
 
relatively simple, for the results after rendering I do not explain too much, please refer to the Classnamebindings property understanding. 
 
 
 
to this, there is a package component after the component is rendered the relevant settings for the HTML tag are described. There is not much content,and the classnamebindings and attributebindings properties are used essentially the same way. 
 
If you have any questions, please leave me a message or check directly Official Tutorials . 
 

Ember.js Getting Started Guide--Customizing the HTML tags for package components