Error : Uncaught Error: Nothing handled the action 'rollDice'. 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.

I made sure that the method in the controller had the same name as the action. ???

HTML portion

    <script type="text/x-handlebars">
     {{outlet}}
    </script>
    <script type="text/x-handlebars" id="index">
     {{#linkTo "roll"}}Lets roll dice!{{/linkTo}}
     </script>
     <script type="text/x-handlebars" id="roll">
        <p class="centerme">A Dice Roller.</p>
    <p>&nbsp;</p>
        <p>Click to play!<br/>
        <button id="play" {{action 'rollDice'}}>Roll Dice</button>
    </p>
    <section id="roll-wrap">Dice stuff</section>
<script>

Controller

DiceRoller.RollController = Ember.ObjectController.extend({
    var diceModel = this.get('model');
    actions: {
        rollDice: function () {
            var x=[270,1080,1440,810];
            var rand1=Math.floor(Math.random()*4);
            var rand2=Math.floor(Math.random()*4);
            
            diceModel.set('rotateXvalue',x[rand1]+"deg");
            diceModel.set('rotateYvalue',x[rand2]+"deg");
            diceModel.save();
        }.property('diceModel.rotateXvalue','diceModel.rotateYvalue')
    }
});

Routing

DiceRoller.Router.map(function() {
    this.resource("roll");
});

DiceRoller.IndexRoute = Ember.Route.extend({
    redirect: function(){
        this.transitionTo("roll");
    }
});

DiceRoller.DiceRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('Dice');
    }
});

Model

DiceRoller.Dice = DS.Model.extend({
rotateXvalue: DS.attr('string'),
rotateYvalue: DS.attr('string')
});

DiceRoller.Dice.FIXTURES = [
{

rotateXvalue: '40deg',
rotateYvalue: '37deg'
}
];

/ My JS bin, so far it gives me an error about setting the content of an object proxy.

Error : Uncaught Error: Nothing handled the action 'rollDice'. 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.

I made sure that the method in the controller had the same name as the action. ???

HTML portion

    <script type="text/x-handlebars">
     {{outlet}}
    </script>
    <script type="text/x-handlebars" id="index">
     {{#linkTo "roll"}}Lets roll dice!{{/linkTo}}
     </script>
     <script type="text/x-handlebars" id="roll">
        <p class="centerme">A Dice Roller.</p>
    <p>&nbsp;</p>
        <p>Click to play!<br/>
        <button id="play" {{action 'rollDice'}}>Roll Dice</button>
    </p>
    <section id="roll-wrap">Dice stuff</section>
<script>

Controller

DiceRoller.RollController = Ember.ObjectController.extend({
    var diceModel = this.get('model');
    actions: {
        rollDice: function () {
            var x=[270,1080,1440,810];
            var rand1=Math.floor(Math.random()*4);
            var rand2=Math.floor(Math.random()*4);
            
            diceModel.set('rotateXvalue',x[rand1]+"deg");
            diceModel.set('rotateYvalue',x[rand2]+"deg");
            diceModel.save();
        }.property('diceModel.rotateXvalue','diceModel.rotateYvalue')
    }
});

Routing

DiceRoller.Router.map(function() {
    this.resource("roll");
});

DiceRoller.IndexRoute = Ember.Route.extend({
    redirect: function(){
        this.transitionTo("roll");
    }
});

DiceRoller.DiceRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('Dice');
    }
});

Model

DiceRoller.Dice = DS.Model.extend({
rotateXvalue: DS.attr('string'),
rotateYvalue: DS.attr('string')
});

DiceRoller.Dice.FIXTURES = [
{

rotateXvalue: '40deg',
rotateYvalue: '37deg'
}
];

http://jsbin./qosujasi/1/ My JS bin, so far it gives me an error about setting the content of an object proxy.

• javascript
• ember.js
• dom-events
• action

• Do you have a application template with an {{outlet}}? – NicholasJohn16 Commented Apr 14, 2014 at 17:18
• Also, I thought that the DiceRoute in the router is what finds the model? – hbs2014 Commented Apr 15, 2014 at 15:20
• Since you're using /#/roll, your route would be RollRoute and you're controller would be RollController. You can still use a dice model with this route, like in my example below. – NicholasJohn16 Commented Apr 15, 2014 at 16:21
• I have changed the DiceRoute in my router.js to RollRoute. I used a fixture adapter to create a record for my model. It works because the values of the record provide the values of the CSS needed to render the dice. I just can't get the action event to work correctly, that is to change the values in the model so that the dice rolls. – hbs2014 Commented Apr 16, 2014 at 0:57

3 Answers 3

You've named your controller incorrectly. The correct controller for the roll route would be DiceRoller.RollController.

In the RollController, you should get the model inside the roleDice action and you don't need the list of properties. That's for puted properties, not actions.

DiceRoller.RollController = Ember.ObjectController.extend({
    actions: {
        rollDice: function () {
            var diceModel = this.get('model');
            var x=[270,1080,1440,810];
            var rand1=Math.floor(Math.random()*4);
            var rand2=Math.floor(Math.random()*4);

            diceModel.set('rotateXvalue',x[rand1]+"deg");
            diceModel.set('rotateYvalue',x[rand2]+"deg");
            diceModel.save();
        }
    }
});

Check out this jsBin.

You need to create the model record to be able to set values on it in your route, like this:

DiceRoller.RollRoute = Ember.ObjectController.extend({
    model:function() {
        return this.store.createRecord('dice');
    }
});

I am fresh new to Ember.js and also struggling, but for me it worked to either move actions: {...} from controller to route:

DiceRoller.DiceRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('Dice');
    },
    actions: {...} // move actions here
});

OR to use ApplicationController instead of RollController:

DiceRoller.ApplicationController = Ember.ObjectController.extend({
    var diceModel = this.get('model');
    actions: {
        rollDice: function () {
            var x=[270,1080,1440,810];
            var rand1=Math.floor(Math.random()*4);
            var rand2=Math.floor(Math.random()*4);

            diceModel.set('rotateXvalue',x[rand1]+"deg");
            diceModel.set('rotateYvalue',x[rand2]+"deg");
            diceModel.save();
        }.property('diceModel.rotateXvalue','diceModel.rotateYvalue')
    }
});

Not saying it is the correct way! Just saying it worked for me - still learning ;-)

When you follow Ember official tutorial, and get to the Templates->Actions chapter, you will probably run into this error on first example because this example uses Components that are explained later. I tried adding action to templates/about.hbs and creating ponent/about.js with action handler, but these two wouldn't work together. Im guessing the trick is to define hbs file in templates/ponents/ but before that I got the action working by creating controllers/about.js like this:

import Ember from 'ember';

export default Ember.Controller.extend({
isBody: false,
  actions: {
    toggleBody() {
        console.log("Look at me go!");
        this.toggleProperty('isBody');
    }
  }
});

This is EmberCli environment, v2.0.0 and they say Controllers and Components will merge into one thing soon, so...