A template is used to create a standard layout across multiple
pages. When you change a template, the pages that are based on that
template automatically get changed. Templates provide standardization controls.
The Application Template
If you don't define template in your application, the Ember.js by default renders an Application template. Ember.js templates are placed within the <script> tag. You must define at least one placeholder: {{outlet}} that the router fills the appropriate template.<script type="text/x-handlebars"> <div> {{outlet}} </div> <h2>{{App.name}}</h2> </script>In the above code, we are using the handlebar template. It is declared within the script tag which helps to display the properties such as name from the Application.
Example
<!DOCTYPE html> <html> <head> <title>Emberjs Template</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="application"> <!-- name of the template is application and it is default template --> <div> {{outlet}} </div> <!-- call the name value --> <h2><i>{{App.name}}</i></h2> </script> <script type="text/javascript"> //creating the App varible by the Ember.Application's create() method var App = Ember.Application.create() //assigning value to the name variable App.name = "Hello... Welcome to TutorialsPoint!"; </script> </body> </html>
Output
Let's carry out the following steps to see how above code works:- Save above code in template.htm file
- Open this HTML file in a browser.
No comments:
Post a Comment