Emberjs nothing handled this action

Question

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.com/qosujasi/1/ My JS bin, so far it gives me an error about setting the content of an object proxy.

Answer 1

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 computed 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');
    }
});