CODEWITHSUNDEEP
ember.js
VNarasimhaM
VNarasimhaM

Reputation: 1570

Why does Action event on a button does not call the controller function

I have an index.html file which has a button with an action handler. 

<button {{action 'modules'}} > press </button>

But nothing happens when I press the button.

please look at the code at jsbin:

http://jsbin.com/OREMORe/1/edit

Feel free to correct any other inconsistencies. Appreciate any help. Thx.

Upvotes: 0

Views: 55

Answers (1)

chopper
chopper

Reputation: 6709

You'd do it like this. Please note that there were a few things wrong with your code:

1) You handlebars code with your button in it was not wrapped in a handlebars script tag 2) You're 'modules' template was in the application template 3) You did not include valid links to the necessary libraries 4) There was not rootElement specified for the Application 5) You tried to access ModulesController in the ApplicationRoute. I inserted a redirect to 'modules' 6) You tried to access module in your {{#each}} loop, but that does not exists in your model. What you want is content.

<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="modules">
    <ul>
      {{#each content}}
      <li>{{this}}</li>
      {{/each}}
        <button {{action 'modules'}} > press </button>
    </ul>
  </script>

And:

var Test1 = Ember.Application.create({
  rootElement: 'body',
    ready: function() {
        console.log("App ready1");
    }
});

Test1.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('modules');
  }
});


Test1.Router.map( function() {
    this.route('modules');
});

Test1.ModulesController = Ember.Controller.extend({
    actions: {
        modules: function() {
            console.log('clicked the button');
/*            this.transitionToRoute('modules');*/
        }
    }
});
Test1.ModulesRoute = Ember.Route.extend({
    model: function() {
        return ['item1', 'item2'];
     }
});

Upvotes: 1

Related Questions