Ember.js Getting Started Guide--handlebars property bindings

This article migrates from http://www.ibeginer.sinaapp.com, welcome to visit the original page.

simply speaking, property binding is in fact The handlebars expression is used directly within the HTML tag (used in the "<" and ">" of a label ) . 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, the binding string

<!--//App/templates/binding-element-attribute.hbs-<div id= "logo" > </div>

Add test data to the corresponding route .

Import Ember from ' Ember '; Export Default Ember.Route.extend ({model:function () {return {imgurl: ' Http://i1.tietuku.com/1f7       3778ea702c725.jpg '}; }});

After running the template is compiled into the following code:

<div id= "logo" > </div>

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

1,bindingBooleanvalue

in the development process, we often determine whether to add a tag to a certain value CSS class, or depending on a value, whether the button is available, 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, otherwise}}<input type= ' checkbox ' disabled={{model.isenable}}>

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

<input type= "checkbox" disabled= "" >

Otherwise

<input type= "checkbox" >

2,bindingData-xxxProperties

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-placem ent= ' bottom ' title= ' Name '}}

after rendering the template, get the following HTML Code

<a id= "ember455" href= "/binding-element-attributes" class= "Ember-view active" > link-to </a><input id= " 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 boundin view , as follows:

App/views/binding-element-attributes.js import Ember from ' Ember '; Export default Ember.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 the 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

<a id= "ember398" href= "/binding-element-attributes" data-toggle= "dropdown" class= "Ember-view Active" >link-to& Lt;/a><input id= "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 inEmber2.0version, the code is now based on a personal understanding of the code of the specified component is placed in theView, the official tutorials are notEmber2.0version of the, soBinding-element-attributes.jsThe code for this file is a bit of a miracle....I hope readers will be very generous!

Ember.js Getting Started Guide--handlebars property bindings