EmberJS 操作
操作
{{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 | 指定目标 使用目标选项创建替代目标。 |