EmberJS-Template Binding boolean Value

Quiz

Description

You can also add boolean values to the class property, which displays the dasherized version of the class name. If boolean value is true, it displays the class name otherwise displays the HTML tag without the class name.

Syntax

<div {{bind-attr class="ClassName"}}>
   <!-- Block -->
</div>

//Syntax for without dasherzing the class name
<div {{bind-attr class="ClassName:classname"}}>
   <!-- Block -->
</div>

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Binding Boolean Values</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars">
         <div {{bind-attr class="App.isEnabled"}}>
            Welcome... check your console for the div tag that displays class name as <b>'is-enabled'</b>
         </div>
      </script>
      <script type="text/javascript">
         var App = Ember.Application.create()
         //Syntax for dasherizing the class name
         App.isEnabled=true
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works:

Save above code in temp_bind_attr_boolean.htm file
Open this HTML file in a browser.

Print Page