EmberJS 操作

2018-01-03 18:43 更新

操作

{{action}}辅助类用于使HTML元素可点击。当用户单击事件时，操作将转发到应用程序。

<script type="text/x-handlebars">
   <button {{action 'records'}}>Click</button>
</script>

上面的代码行添加按钮点击你的应用程序。当用户点击按钮动作将被转发到记录页面。

例子

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Action</title>
      <!-- CDN's-->
      <script src="/attachements/w3c/handlebars.min.js"></script>
      <script src="/attachements/w3c/jquery-2.1.3.min.js"></script>
      <script src="/attachements/w3c/ember.min.js"></script>
      <script src="/attachements/w3c/ember-template-compiler.js"></script>
      <script src="/attachements/w3c/ember.debug.js"></script>
      <script src="/attachements/w3c/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars">
         {{outlet}}
      </script>

      <script type="text/x-handlebars" data-template-name="index">
         <button {{action "User"}}>Click Here</button>
      </script>

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

         App.IndexRoute = Ember.Route.extend({
         //defining the action for the User click event
            actions: {
            //it takes the parameter as user
               User: function(user) {
                  document.write('Welcome.. To Tutorialspoint');
               }
             }
         });
      </script>
   </body>
</html>

输出

让我们执行以下步骤，看看上面的代码如何工作：

将以上代码保存在 actions.html 文件中
在浏览器中打开此HTML文件。

下表列出了操作的操作事件：

序号	操作事件和描述
1	操作冒泡路由和控制器操作处理程序必须放置在操作散列内。
2	操作参数您还可以将参数传递到操作处理程序。
3	指定事件的类型使用选项指定替代事件。
4	指定列入白名单的修饰符键使用 allowedKeys 选项指定不应忽略哪些键。
5	停止事件传播 {{action}} 帮助允许禁止传播到父节点。
6	指定目标使用目标选项创建替代目标。

以上内容是否对您有帮助：

写笔记

我要补充