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. The last Ember CLI will automatically generate 2 main files for 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 am a route instead of a template ? Because you generate the route and the ember CLI will automatically generate a corresponding template file for you, you will need to manually re-generate the route If you are a Mr. Template. command that you want to execute 2 commands (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 first add the impersonation condition code in the route file:

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, if expression

<!--App/templates/handlbars-conditions-exp-route.hbs--

<!--If the value of the model is not false, undefined, null or [] Displays the contents of the label--
{{#if model}}
Welcome back, <b>{{model.name}}</b>!
{{/if}}

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

You need to pay attention to two places when running, one is the URL. If you are also using the hump-style naming method (generate named: Ember Generate route Handlbarsconditionsexproute), then your URL is the same as mine, Anyway, you just remember that the URL to execute is consistent with the name of the route you generated. Of course, the name can be modified. In App/router.js, the code in Router.map is also automatically generated by the Ember CLI. We can see there is a "this.route (' Handlebarsconditionsexproute ');" This is the name of your route.

Recommendation: The routing name after the build is best not to be modified, Ember route is found based on the default naming convention the corresponding template , if you modify the Router.js name you need to modify app/routes at the same time . and App/templates the file name corresponding to the. Otherwise the route on the URL cannot find the corresponding template to display your content.

Description: Maybe you see that I gave you a little difference, because I modified the main template (app/index.html) You can add your favorite style in this file, no longer repeat this, this is not the focus of this article.

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

<!--App/templates/handlebars-conditions-exp-route.hbs--
<!--If......else ... Judgment--
{{#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 both Isatwork and isreading are false. The reader can modify the corresponding values within the app/routes/handlebars-condition-exp-route.js and then view the output results.

3, unless 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-judgmental
{{#unless model.isreading}}
Unless .....
{{/unless}}

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

4, using an expression in an HTML 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 value of enable is true, the result is to add a 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