Ember.js Getting Started Guide--handlebars conditional expressions

This series of articles are all migrated from (http://ibeginner.sinaapp.com/), Welcome to the original website.

The handlebars template provides conditional expressions similar to the general language, such as if,if......else ... .

before we introduce these conditional expressions, we will prepare for the presentation. First I'll create the route,template using the Ember CLI name , and then write the handlebars template code on the resulting template .

Mr. Cheng Route:

Ember Generate Route Handlbars-conditions-exp-route

or:ember generate route Handlbarsconditionsexproute

Both commands generate the same file name. Finally Ember CLI will automatically generate 2 main filesfor us: App/templates/handlbars-conditions-exp-route.hbs and app /routes/handlbars-conditions-exp-route.js

Note: If you are using the Camel-type name Ember CLI will be based on Ember The naming specification is automatically generated with the underscore "-" the delimited name. Or is that why I'm Mr. Route? rather than template .? ? Because you generated the routeEmber CLI at the same time will automatically generate a corresponding template file for you, if you are Mr. template , you'll also need to manually execute the generated route The command that you want to perform 2 command (ember generate template Handlbars-conditions-exp-route and ember generate route Handlbars-conditions-exp-route).

get back to the point after getting the files needed for the presentation, and start introducing The conditional judgment expression for handlebars.

to demonstrate the first Route file to add the simulation condition code:

App/routes/handlebars-condition-exp-route.js import Ember from ' Ember ';  Export Default Ember.Route.extend ({model:function () {return {name: ' i2cao.xyz ', age:25, Isatwork:              False, Isreading:false};       return {enable:true}; }            });

The contents of the route file will be described in detail later in the route section , and you can take it as a return object to the page. very similar to an EL expression, you can use the "." gets the attributes in the object (for example:person.name).

1,  IfAn expression

<!--App/templates/handlbars-conditions-exp-route.hbs--<!--If the value of the model is not false, undefined, null, or [ ] When displaying the contents of the tag-->{{#if model}}welcome back, <b>{{model.name}}</b>! {{/if}}

Each conditional expression begins with a "#" and has a corresponding closing tag.

url ember generate route Handlbarsconditionsexproute url url with your generated route app/router.js router.map Ember cli auto-generated. We can see that there is a this.route (' Handlebarsconditionsexproute ');

< Strong> recommendation: the route name after the build is best not to be modified, ember  Route corresponding template is found according to the default naming convention. Span style= "font-family: the song Body;" > If you modify the router.js app/routes   app/templates  " Cannot find the corresponding template show your content.

Description: Maybe you see that I gave you a little bit of a difference because I modified the main template (app/index.html) you can add your favorite style to this file and don't repeat it here, this is not the focus of this article.

2,  If......else ...An expression

<!--app/templates/handlebars-conditions-exp-route.hbs--><!--if......else ... Judge-->{{#if model.isatwork}}ship that code. <br>{{else if Model.isreading}}you can finish War and peace eventually. <br>{{else}}this is else block ... {{/if}}

The result is output: This is else block ...

because isatwork and the isreading 's All false . The reader can modify The corresponding values within the app/routes/handlebars-condition-exp-route.js and then view the output results.

3,  UnlessAn expression

The unless expression is similar to non-operation and outputs the contents of the expression when the model.isreading value is false .

<!--App/templates/handlebars-conditions-exp-route.hbs--><!--non-judging-->{{#unless model.isreading}}unless ..... {{/unless}}

if the isreading value is false, the output unless ... Otherwise, it does not enter an expression.

4,  in theHtmluse an expression in a tag

the handlebars expression can be embedded directly within the HTML tag.

<!--App/templates/handlebars-conditions-exp-route.hbs--><!--can embed an expression directly in a tag, and when the Enable value is true, the result is an additional class (CSS Class) enable, otherwise add ' disable '--><span class={{if enable ' Enable ' disable '}}>enable or disable</span>

The above expression is actually a three-mesh operation. Not hard to understand.

These are some of the most commonly used conditional expressions in handlebars, which you must understand as a small example, for developers who are a little surprised to even see it again. Very simple, there may be other conditions to judge the expression, follow up.

If you need the full code you can download it from GitHub.

Ember.js Getting Started Guide--handlebars conditional expressions