EmberJS-Template Custom View Helper

Quiz

Description

You can render the view classes in multiple places by using the {{view}} helper. It register the built in custom view helper.

Syntax

Ember.Handlebars.registerBoundHelper('viewname', view);

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Custom View Helper</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>
      >!-- Add the moment.min.js CDN which has the moment() function-->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.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">
         <!-- call the 'time' property -->
         <h1>Todays Time and Date:</h1>
         <b>{{time this}}</b>
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();
         //registering inbuilt time zone using moment.js cdn
         Ember.Handlebars.registerBoundHelper('time', function(date, options) {
            var formatter=options.hash['format'] ? options.hash['format'] : 'hh:mm a MM-DD-YYYY';
            //using the moment() method to parse the date and time
            var parse=moment(date);
            //det the date
            var get_date=parse.format(formatter);
            return new Handlebars.SafeString("<time datetime=" + date +">" + get_date + "</time>");
         });
      </script>
   </body>
</html>

Output

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

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

Print Page