Ember.js Getting Started Guide--handlebars property bindings

Simply speaking, property binding is in the HTML tag (used in the "<" and ">" of a label) directly using the handlebars expression. You can use the value of the handlebars expression directly as the value of an attribute in an HTML tag.

Preparatory work: Ember Generate route Binding-element-attributes

1, binding string

<!--  //    - <  ID= "logo">       <  src  Alt/></div>

Add test data to the corresponding route.

Import Ember from ' Ember 'default  Ember.Route.extend ({       function() {               return {imgurl: ' http://i1.tietuku.com/1f73778ea702c725.jpg ' };}       });

After running the template is compiled into the following code:

<id= "logo">       <alt= "logo"  src= "http://i1.tietuku.com/1f73778ea702c725.jpg"></ Div >

You can see that {{Model.imgurl}} is bound to the SRC attribute as a string.

1, binding Boolean value

In the development process, we often determine whether to add a CSS class to a tag, or to determine whether a button is available based on a value, etc... So how did ember do it??

For example, the following code demonstrates that the checkbox button determines whether or not it is available based on the value of the bound property isenable.

{{! When Isenable is true, disabled is true, not available;}} <  typedisabled={{model.isenable}}>

If the value set in the route is true then the rendered HTML is as follows:

<type= "checkbox"  disabled= "">

Otherwise

<type= "checkbox">

2, binding data-xxx property

By default, Ember is not bound to a class of properties such as Data-xxx. For example, the following binding results will not get your expectations.

{{! Bind to data-xxx This property requires special settings}} {{#link-to ' photo ' data-toggle= ' dropdown '}} link-to {{/link-to}}{{input type= ' text ' data-toggle= ' tooltip ' data-placement= ' bottom ' title= ' Name '}}

After rendering the template, get the following HTML code

<aID= "ember455"href= "/binding-element-attributes"class= "Ember-view Active">Link-to</a><inputID= "ember470"title= "Name"type= "text"class= "Ember-view Ember-text-field">

You can see the properties of Data-xxx are gone!!! Many of the front-end frameworks now use the data-attribute, such as Bootstrap. What then? You can specify the corresponding render component Ember.linkcomponent and Ember.textfield (personally understood) in the view.

Execute command to get view file: Ember Generate view binding-element-attributes, manually bound in view, as follows:

//App/views/binding-element-attributes.jsImport Ember from' Ember '; exportdefaultEmber.View.extend ({});//The following is the official code, but it is obvious that the use of this method is not 2.0 version!! //2.0 version of the writing is still in the study, the follow-up, and now in order to demonstrate the template effect temporarily so write! After all, the focus of this article is on the binding of template properties //Binding InputEmber.TextField.reopen ({attributebindings: [' Data-toggle ', ' data-placement ']}); ////Bind link-toEmber.LinkComponent.reopen ({attributebindings: [' Data-toggle ']});

The results obtained after rendering conform to expectations. Get the following HTML code

<aID= "ember398"href= "/binding-element-attributes"Data-toggle= "Dropdown"class= "Ember-view Active">Link-to</a><inputID= "ember414"title= "Name"type= "text"Data-toggle= "tooltip"data-placement= "Bottom"class= "Ember-view Ember-text-field">

You can see that the properties of data-xxx are properly rendered to HTML.

This article introduces a few commonly used property binding methods, very practical! But a little regret that I have limited ability to understand the last instance in the Ember2.0 version of how to use, now the code is based on a personal understanding of the specified component of the code in view, the official tutorial is not Ember2.0 version, so binding-element-attributes.js this The code of the file is a bit of a miracle ... I hope readers will be very generous!

Ember.js Getting Started Guide--handlebars property bindings