Ember.js Getting Started Guide--handlebars basics

Ember uses the handlebars template Library as the application's view layer. the handlebars template is very similar to normal HTML . But handlebars provides a very rich Ember expression compared to normal HTML .

Ember uses handlebars templates and expands a lot of features so that you can use handlebars as easily as you would with HTML . You can specify a template to display your application interface, and you do not need to write code that updates the display value of the interface, Ember will automatically update for you.

introduce a very useful and powerful tool before you introduce the template Ember CLI, use this tool can automatically generate Ember code, even can help you build a new Ember project, save you a lot of repetitive work. For more information about it, please see the official website , there is a very detailed tutorial, or you can use the command:ember–help to view its help document, the plug-in involved please self-installation, if you do not understand can contact me. I'll use this tool to create a new Ember project and run it.

1,Ember CLITools

New Project Command :

Ember New Chapter2_tempalte

Enter the project directory and start the server:

CD Chapter2_template

Ember Server

run the project, the browser opens this link:http://localhost:4200/

If you can see the following message stating that the installation was successful.

If the project is created successfully you can continue to look down, if the creation is unsuccessful please try again, because the following code is based on this project to demonstrate!!! For each file and directory generated, please crossing the Web document , which will be described in great detail. For the convenience of lazy people here is a brief introduction of some of the most important directories:

Directory	Description
App
app/controllers	store c ( MVC "layer ( controller) code file
app/helpers	store custom helper code file
App/models	store m ( MVC "layer ( model) code file
app/routes	store project routing Setup code file
app/templates	store project template code file
bower_components	third-party plug-in library
Tests
Vendor	not using npm and Bower
Ember-cli-build.js	setting Build specification
Dist	Storing Project static resources

       These files or directories are often used later in the development process, as long as you are usingEmber New AppNameThe command-generated project will include these directories or files. The most important of these isappdirectory of files, directories, fromappyou can clearly see that this is aMVCframework of the project. EmberThe reason to findControllercorresponding to theTemplateis also found based on the directory and file name,Emberthere is a set of naming rules for yourself, see for detailsOfficial Documents.

2, the template definition

<!--App/templates/application.hbs-->

 Note: The first sentence of the comment in the code indicates that the file's location already has a file name, and subsequent snippets are labeled in this way. If there is no special description the first line of code is the path of the comment file and its name. 
the above is a template, very simple template, only one H1 and the P tags, when you save this file Ember CLI will automatically help you refresh the page, do not need you to manually refresh! Your browser page should now see the following information:
so congratulations, the template definition is successful, as for why the implementation of localhost:4200 directly show here when you slowly learn the  controller and the route will naturally understand, you will be Application.hbs is a default home page, so you should understand it! 
3,HandlbarsAn expression
        Each template will have one associated with it.Controllerclass. This is why the template can display the value of an expression, which you canControllerclass to set the value shown in the expression in the template, asJava WebIn development inservletorActioncalledRequest.setattribute ()method to set a property. For example, the following template code:
<!--App/templates/application.hbs--<!--this is the default template, and Ember automatically finds it based on named rules Controllers/application The corresponding template is Templates/application.hbs---
below we create a controller. This time we created with Ember CLI command: Ember generate controller application, this command indicates that a controller is created and the name is application, and then we'll get a few files as follows:

 
  

  
   
 
    
app/controllers/application.js--controller itself
 
    
tests/unit/controllers/application-test.js--controller the corresponding unit test file
 
   
 
  
Open your file directory, can not be seen under the App/controllers ! 
now, to demonstrate the expression, we Controller Add some code:
App/controllers/application.js import Ember from ' Ember '; /** * Ember will automatically find Templates/application.hbs this template according to the naming rules, * @type {hash} need to set the hash object */export default Ember.Controller.extend ({       //  set two properties       firstName: ' Chen ',       lastName: ' Ubuntuvim ',       email: ' [email Protected] '});
Then modify the displayed template as follows:
<!--App/templates/application.hbs--<!--this is the default template, and Ember automatically finds it based on named rules Controllers/application The corresponding template is Templates/application.hbs---
save, then the page will automatically refresh and we can see the Controller set the value that can be displayed directly on the template. 
This is the binding of the expression, and later you will learn more interesting and more complex handlebasr expressions,and the contents of the HTML document will change depending on the expression. 
as your application grows in size, there will be more templates and controllers associated with it. And sometimes a template can also correspond to these multiple controllers. That is, the value of an expression on a template may have more than one controller control. 


Ember.js Getting Started Guide--handlebars basics