EmberJS-Components Sending Multiple Actions

Previous
Quiz
Next

Description

The component generates multiple different actions to specify different events. You need to specify name of the event as the first argument to sendAction() method.

Syntax

{{user-form submit="action1" cancel="action2"}}

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Sending Multiple Actions</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">
         <h1>Create New User</h1>
            {{user-form submit="createUser" cancel="cancelUserCreation" }}
      </script>

      <script type="text/x-handlebars" data-template-name="components/user-form">
         <form {{action "submit" on="submit"}}>
            <p>Name {{input type="text" value=fname}}</p>
            <button {{action "cancel"}}>Cancel</button>
            <input type="submit" value="Submit User Name">
         </form>
      </script>

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

         App.IndexController = Ember.ObjectController.extend({
            actions: {
               //calling the multiple actions
               //action for creating user
               createUser: function(user) {
                  document.write("Created user: " + user.fname);
               },

               //action for cancle
               cancelUserCreation: function() {
                  document.write("Canceled user creation");
               }
            }
         });

         App.UserFormComponent = Ember.Component.extend({
            actions: {
               submit: function() {
                  //simply addind an additional parameters to the sendAction() method as submit
                  this.sendAction('submit', {
                     fname: this.get('fname'),
                  });
               },

               cancel: function() {
                  //simply addind an additional parameters to the sendAction() method as cancel
                  this.sendAction('cancel');
               }
            }
         });
      </script>
   </body>
</html>

Output

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

  • Save above code in comp_mult_actn.htm file

  • Open this HTML file in a browser.

Print Page
Previous
Next
Advertisements