Introduction
The Ember.js components uses the W3C web component specification and these components provides true encapsulation UI widgets. It contains the three main specification as templates, shadow DOM and custom elements.The component is declared within the data-template-name has a path name instead of a plain string. The components are prefixed with "components/", is to tell an Ember.js that we are dealing with a component template other than regular application template.
<script type="text/x-handlebars"> //component name {{my-name}} </script> <script type="text/x-handlebars" data-template-name="components/my-name"> // This is component </script>In the above code, my-name is the name of the component which is declared within the data-template-name as components/my-name.
Example
<!DOCTYPE html> <html> <head> <title>Emberjs Components</title> <!-- CDN's--> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script> <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script> <script src="https://builds.emberjs.com/release/ember.debug.js"></script> <script src="https://builds.emberjs.com/beta/ember-data.js"></script> </head> <body> <script type="text/x-handlebars" data-template-name="index"> <!-- defining the component name --> {{my-name tag="Tutorialspoint.."}} </script> <script type="text/x-handlebars" data-template-name="components/my-name"> <!-- this is component 'my-name' --> <h2>Tag: </h2> <h3>{{tag}}</h3> </script> <script type="text/javascript"> App = Ember.Application.create(); </script> </body> </html>
Output
Let's carry out the following steps to see how above code works:- Save above code in component.htm file
- Open this HTML file in a browser.
No comments:
Post a Comment