EmberJS-Components Sending Parameters with an Action

Quiz

Description

You can send parameters with an action by using sendAction() method which provides additional context to the route or controller to handle an action and has string 'action' as the first argument.

Syntax

this.sendAction('action', param1, param2);

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Sending Parameters with an Action</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" data-template-name="index">
         <p>{{my-comp title=title action="compFunc"}}</p>
      </script>

      <script type="text/x-handlebars" data-template-name="components/my-comp">
         <input type="button" value="Click Me For Title" {{action "compFunc"}}/><br/>
         <p><b>Title:</b> {{title}}</p>
      </script>

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

         App.MyCompComponent = Ember.Component.extend({
            actions: {
               compFunc: function() {
                  //simply addind an additional parameters to the sendAction() method
                  this.sendAction('action', this.set('title', "Tutorialspoint"));
               }
            }
         });
      </script>
   </body>
</html>

Output

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

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

Print Page