Ember.js Getting Started Guide--component definition

have to say that Ember update is on is too fast!! This tutorial has not been written in half and then updated to v2.1.0 !!!! But in order to unify or use the official v2.0.0 Reference Document!!

start with the new chapter - component. This chapter will use 6 articles to introduce Ember 's components, starting with its definition to know how it is used, I will answer for you!

preparatory work:

This chapter code Unified Access Project chapter4_components , the project code can be found on the following URL:

Https://github.com/ubuntuvim/my_emberjs_code

Https://git.oschina.net/chendequan/my_emberjs_code_2

as with the previous article, the project is still using The Ember CLI command creates the project and individual component files.

Create the project and test the run, first execute the following four commands, and finally execute in the browser:http://localhost:4200/.

Ember New Chapter4_components

CD chapter4_components

Ember Server

If you can see "Welcome to Ember" on the page, the project framework is built successfully! Then you can continue to look down, or you want to set up a good project and then go down to study ~ ~ ~

1, customizing components and using

creating a component method is simple: ember Generate component My-component-name . One command, but be aware that the name of the component must contain an underscore "-", such as blog-post,test-component, Audio-player-controls the naming of this format is legal, but the naming of postandtest is illegal! One is to prevent user-defined component names from being duplicated by the tag names of the specified tags, and the other is to ensure that Ember automatically detects user-defined components.

       below defines a component, ember g component blog-post ember CLI app/templates/components Below to see the created file.

<!--App/templates/components/blog-post.hbs--<article> 
 
 
 
to demonstrate the use of components, you need to do some preparatory work:
 
Ember G Route Index
 
  app/routes/index.js import Ember from  ' Ember ';  export default  ember.route.extend ({             model:  function ()  {                return [                  { id: 1, title:  ' Bower: dependencies and resolutions new ',  body:  "In the bower.json file, i see 2 keys dependencies  and resolutionswhy is that so? i understand bower has a  flat dependency structure. so has it got anything to do  with that ? ", category:  ' Java '  },                  { id: 2, title:  ' highly nested json payload  - hasmany error ', body:  ' Welcome to the ember.js discussion forum .  we ' re running on the open source, ember.js-powered discourse  forum software. they are also providing the hosting for us.  thanks guys! please use this space for discussion abo... read  More ", category:  ' php '  },                  { id: 3, title:  ' passing a jwt to  my rest adapter new  ', body:  ' this sets up a binding  between the category query param in the url, and the  Category property&nbSp;on controller:articles. in other words, once the articles route  has been entered, any changes to the category query param  in the url will update the category property on controller: Articles, and vice versa. ", category:  ' Java '}            ];                 }});
 
<!--App/templates/index.hbs-to {{#each model as |item|}} <!--using custom components Blog-post--{#blog-post Title=item.title}} {{Item.Body}} {{/blog-post}}{{/e ACH}}
 
In this code, you use a custom component to display the data. The final page appears as follows:
 
 
look at the generated HTML Code:
 
 
The custom component is rendered to the template Index.hbs where the blog-post is used . and the HTML tag of the custom component does not change. 
 
You should probably know how to use the component here, and how it renders to the place where the component is used, and how it is rendered. Don't worry ~ ~ The following article will answer for you. 
 
Description : By default, custom components will be rendered into the div tag, of course, this default is also modifiable, relatively simple in this but more introduction, please self-study, website:http://guides.emberjs.com/ v2.0.0/components/customizing-a-components-element/. 
 
 2, custom component Classes 
user-defined component classes are required to inherit from Ember.component class. 
 
Typically, we will encapsulate frequently used template fragments into components that need to be defined once to be used in any of the project's templates, without the need to write any JavaScript code. As described in the 1th " custom component and use " above . 
 
But if you want your component to have special behavior, and these behaviors are not available to the default component classes (e.g., changing the label of a package component, responding to a component template initializing a state, etc.), you can customize the component class at this point, but inherit Ember.component, if your custom component class does not inherit this class, your custom component is likely to have some unpredictable problems. 
 
        ember The name of the custom component class that can be identified is canonical. For example, if you define a component named  Blog-post app/components/blog-post.js< Span style= "font-family: Song Body" >. If the component name is  audio-player-controls then the corresponding component class name is  app/components/ Audio-player-controls.js component class name has the same name as the component, this is the    v2.0    The naming method, please distinguish the version of the  Ember   , the previous version of the component naming convention is a camel-style naming convention. 
 
 As a simple example, in the 1th " Custom component and use " , the component is rendered to the div tag by default, You can modify this default label in the Component class. 
 
App/components/blog-post.js import Ember from ' Ember '; Export Default Ember.Component.extend ({tagName: ' nav '});
 
This code modifies the label name of the package component, and after the page refreshes The HTML code is as follows:
 
 
you can see the component's the HTML code is included in the nav tag. 
 3, DynamicRenderingComponents 
Dynamic rendering of components and Java is somewhat similar in polymorphism. the {{component}} helper is deferred until run time before deciding to render the page using that component. This dynamic rendering is especially useful when the program needs to render different components differently depending on the data. Can make your logic and try to split away. 
 
So how do you use it? It is very simple to pass the component name as a parameter, for example: using {{component ' Blog-post '} and {{blog-post}} result is consistent. We can modify the code of the 1th " custom component and use " template Index.hbs in the instance . 
 
<!--App/templates/index.hbs-to {{#each model as |item|}} <!--another way to use custom components (Dynamic render component mode)--{{component ' Blog-post ' Title=item.title}} {{Item.body}}{{/each}}
 
After the page refreshes, you can see that the results are the same.
 
 
Below is a demonstration of how different components can be rendered depending on the data. 
 
in accordance with the usual practice, first prepare for the work, use The Ember CLI command creates 2 different components. 
 
Ember G Component Foo-component
 
Ember G Component Bar-component
 
<!--App/templates/components/bar-component.hbs--
 
Why you can use post to get data, because parameters are passed where the component is used. you can see it in the template Index.hbs . 
 
<!--App/templates/components/foo-component.hbs--
 
 
modify the displayed data, Note that the  last increment of data is a property of PN, and the value of PN is the name of the component. 
 
  app/routes/index.js import Ember from  ' Ember ';  export default  ember.route.extend ({        model: function ()  {                return [                  { id: 1,  title:  ' bower: dependencies and resolutions new ', body:  "In the  bower.json file, i see 2 keys dependencies and resolutionswhy  is that so? I understand Bower has a flat dependency  structure. so has it got anything to do with that ? ",  pn:  ' Bar-component '  },                  { id: 2, title:  ' Highly nested json payload - hasmany error ',  body:  "Welcome to the ember.js discussion forum. we ' re running  on the open source, Ember.js-powered Discourse forum software.  they are also providing the hosting for us. thanks guys!  Please use this space for discussion abo... read more ", pn: " Foo-component '  },                  { id: 3, title:  ' passing a jwt to my rest  adapter new  ', body:  ' this sets up a binding between the  category query param in the url, and the category property  on controller:articles. in other words, once the articles route has been  Entered, any changes to the category query param in the url  will update the category property on controller:articles, and  Vice versa. ", pn:  ' bar-component '}            ];                }});
 
 
modifies the template Index.hbs of the calling component . 
 
<!--App/templates/index.hbs-to {{#each model as |item|}} <!--render different components based on the component name, the first parameter is the component name, and the second parameter is passed to the data displayed on the component--{{component item.pn Post=item}}{{/each}}
 
after compiling the template, you will get a shape like {{component foo-component post}} call code for the component. 
 
I believe you should know what's going on with the dynamic rendering component! Try it yourself ~ ~
 
 
to the definition and use of this component is complete, do not know you have learned it? If you have any questions, please leave a message or read the official tutorials directly . 
 
Article Original URL: http://ibeginner.sinaapp.com/index.php?m=Home&c=Index&a=detail&id= 4fd3ad852fa5d701c2b281bdfbe6bfd1
 

 

Ember.js Getting Started Guide--component definition