I am trying to trigger an event from an Ember.js controller. I throws an error saying "ember.min.js:3 Uncaught Error: Nothing handled the action 'clicked'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.". Also I am not clear on how the event system works on itself for the targeted action. C an someone help me with this. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Ember.js Application example</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<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="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="github-app">
</div>
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="col-md-12">
<h1>Hello from Ember!</h1>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>This is a github explorer for all the users.</p>
<ul>{{#each dev in controller}}
<li><a href="#">{{dev}}</a></li>
{{/each}}
</ul>
<p>
<button class="btn btn-success" {{action "clicked"}}>Click Me</button>
</p>
<p>{{renderedOn}}</p>
</script>
<script type="text/javascript">
App = Ember.Application.create({
rootElement:"#github-app"
});
App.IndexRoute=Ember.Route.extend({
model:function(){
return [
"Sam",
"Sandy",
"Samudh"
];
}
});
App.IndexController = Ember.ArrayController.extend({
renderedOn : function(){
return new Date();
}.property(),
actions : {
clickMe(){
alert("I been clicked");
}
}
});
</script>
</body>
</html>
Also available at http://jsbin.com/cuxajiyuqa/edit?html,output
You don't have an action with the name 'clicked', and you tell your code to look for an action 'clicked' on clicking the button. Change
{{action "clicked"}}
into
{{action "clickMe"}}
or change the
clickMe(){
action into
clicked(){
and everything should be fine.
Check https://guides.emberjs.com/v2.4.0/templates/actions/ for the documentation on actions