Search code examples
ember.jsember-dataember-clihandlebars.js

Ember - Nothing handled the action occurs

Nothing handled the action error occurs for the following code. How to resolve this?

I have created a view, an object for my sample app using ember. But the action part is not working.

How to bind an action to a view?

HTML:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ember Starter Kit</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
</head>
<body>

<script type="text/x-handlebars">
  <ul class="mod-choosable-list">    
    {{view Ember.CollectionView 
      contentBinding="App.teachersController"
      itemViewClass="App.TeacherView"
      tagName="div"
    }}
  </ul>
</script>

<script type="text/x-handlebars" data-template-name="teacher-view">
  <div {{action 'refresh'}}><b>{{view.content.name}}</b></div>
</script>




  <script src="js/libs/jquery-v1.11.1.js"></script>
  <script src="js/libs/handlebars-v1.3.0.js"></script>
  <script src="js/libs/ember-v1.6.1.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

JS:

App = Ember.Application.create({});

App.Teacher = Ember.ObjectController.extend({
    id: null, 
    name: null, 
    students: null,
    actions: {
        refresh: function(){
          alert("refresh");
        }
      }
});


App.TeacherView = Ember.View.extend({
    templateName: 'teacher-view'
});



App.set('teachersController', Ember.ArrayController.create({
    content: [
        App.Teacher.create({id:1, name: "mr.katz", students: [2, 3]}),
        App.Teacher.create({id:2, name: "mr.dale", students: [1]})
        ]
}));
Solution

  • When you trigger the action refresh, ember will look for the action in the controller. Since you have not specified a controller for the view, the controller for the application template will be used which is App.ApplicationController.

    You can use the following code and your action will trigger.

    App.ApplicationController = Em.Controller.extend({
  actions: {
    refresh: function(){
      alert("refresh");
    }
  }
});

    You can specify the actions in the view too. In that case you will need to specify the target for the action. This will tell ember where to look for the action handler.

    App.TeacherView = Ember.View.extend({
  templateName: 'teacher-view',
  actions: {
    refresh: function(){
      alert("refresh");
    }
  }
});

<div {{action 'refresh' target="view"}}><b>{{view.content.name}}</b></div>

    You can specify a controller for view on its init event.

    App.TeacherView = Ember.View.extend({
  templateName: 'teacher-view',
  setup:function() {
    this.set('controller', App.Teacher.create());
  }.on('init')
});