EmberJS-Template Helper Dependencies

Quiz

Description

If you want to render properties, you need to update the output by changing the one of the properties. When any of the dependent key changes, the output will updated automatically.

Syntax

Ember.Handlebars.registerBoundHelper( function(params)
{
   //do the stuff
}

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Helper Dependencies</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">
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="index">
         <ul>
            {{#each item in model}}
               <li>{{item}}</li>
               {{calls test this}}
            {{/each}}
         </ul>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.IndexRoute = Ember.Route.extend({
            //creating the array.
            //any of the dependent key changes, the output will updated automatically
            model: function() {
               return ['Orange', 'Apple', 'Banana'];
            },
            actions:{
               test:function(){
                  document.write('test');
               }
            }
         });

         //register the handlebars that uses the calls as property name
         Ember.Handlebars.registerHelper('calls', function(property, options) {
            var action = Handlebars.Utils.escapeExpression(this, arguments);
            //listing the values using HTML tag
            return new Ember.Handlebars.SafeString("<li "+new Ember.Handlebars.SafeString(action)+">Adding Fruits</li>");
         });
      </script>
   </body>
</html>

Output

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

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

Print Page