EmberJS-Template Action Bubbling

Quiz

Description

Route's and controller's action handler must be placed inside an actions hash. If the route method and actions have the same name, then action will not be triggered unless it is inside an actions hash. You must put an action handling methods inside an actions hash.

Syntax

Ember.Route.extend({
   actions: {
      FunctionName: function() {
         //use the controller.set method
         this.controller.set('isExpanded', true);
      }
   }
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Action Bubbling</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">
         <!-- invoking the actions 'User' function for Click Here button -->
         <button {{action "User"}}>Click Here</button>
         <!-- triggering isExpanded value -->
         <br/> {{isExpanded}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create()
         App.IndexRoute = Ember.Route.extend({
            actions: {
               User: function(user) {
                  //controller.set is for the Action Bubbling
                  this.controller.set('isExpanded', 'Welcome.. To Tutorialspoint');
               }
            }
         });
      </script>
   </body>
</html>

Output

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

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

Print Page