javascript events - Emberjs nothing handled this action -

error : uncaught error: nothing handled action 'rolldice'. if did handle action, error can caused returning true action handler in controller, causing action bubble. made sure method in controller had same name 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 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/ js bin, far gives me error setting content of object proxy.

you've named controller incorrectly. correct controller roll route diceroller.rollcontroller.

in rollcontroller, should model inside roledice action , don't need list of properties. that's 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 create model record able set values on in route, this:

diceroller.rollroute = ember.objectcontroller.extend({     model:function() {         return this.store.createrecord('dice');     } });