EmberJS-Template Render Helper

Quiz

Description

The {{render}} tells the Ember.js to devote this portion of the page to something. It takes two parameters as context and model. It renders the named template using this controller and also sets the model of the corresponding controller.

Syntax

{{render "context" model(optional)}}

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Render 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>
      <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">
         <!-- renders the "test" view -->
         {{render "test"}}
      </script>

      <script type="text/x-handlebars" data-template-name="test">
        <!-- get the "view" name -->
         <p>Name: "{{view.name}}"</p>
         <!-- displays the controller name -->
         {{controller}}
      </script>

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

         App.TestView = Ember.View.extend({
            name: "Tutorialspoint"
         });
      </script>
   </body>
</html>

Output

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

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

Print Page