EmberJS- Inserting Views in Templates

Inserting Views in Templates

As your application grows, you need to create hierarchy of views to determine different areas of the page and each view is responsible for handling events and their properties. The {{view}} helper adds child view to a parent and uses a string to look up the view class.

   {{view.VarName}}

In the above code, {{view}} helper renders the values for each property which are declared in the Ember.View.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Inserting Views in Templates</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">
         <!-- specifying the view names -->
         {{view "user"}}
         {{view "info"}}
      </script>

      <script type="text/x-handlebars" data-template-name="user">
         <!-- accessing values by using {{view}} helper -->
         <b>User:</b> {{view.firstName}} {{view.lastName}}
         <!-- Setting Child View Templates -->
         {{#view "info"}}
            <b>Age:</b>{{view.age}}
            <br>
            <b>Hobbies:</b>{{view.hobbies}}
         {{/view}}
      </script>

      <script type="text/x-handlebars" data-template-name="info">
         <b>Age:</b> {{view.age}}
         <br>
         <b>Hobbies:</b> {{view.hobbies}}
      </script>

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

         //parent view
         App.UserView = Ember.View.extend({
            //template name is 'user'
            templateName: 'user',
            firstName: "Mack",
            lastName: "Smith"
         });

         //child view
         App.InfoView = Ember.View.extend({
            //template name is 'info'
            templateName: 'info',
            age: 25,
            hobbies: "Reading books"
         });
      </script>
   </body>
</html>

Output

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

  • Save above code in insert_view.htm file

  • Open this HTML file in a browser.

Advertisements