CODEWITHSUNDEEP
javascriptember.jsdom-eventsaction
hbs2014
hbs2014

Reputation: 51

Emberjs nothing handled this action

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.

Upvotes: 5

Views: 7613

Answers (3)

pera
pera

Reputation: 982

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 component/about.js with action handler, but these two wouldn't work together. Im guessing the trick is to define hbs file in templates/components/ 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...

Upvotes: 0

Bugs Bunny
Bugs Bunny

Reputation: 2674

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 ;-)

Upvotes: 2

NicholasJohn16
NicholasJohn16

Reputation: 2409

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

Upvotes: 2

Related Questions