Home/ Questions/Q 9062671
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:47:45+00:00

I wrote this very simple Ember code, but for some reason the event doesn’t

  • 0

I wrote this very simple Ember code, but for some reason the event doesn’t seem to fire when I press the button. Any tips?

<!DOCTYPE html>

<html>

  <head>
    <title>Test</title>
  </head>

  <body>

    <script type="text/x-handlebars">
      {{#view CounterView}}
        Counter: {{Counter.value}}

        <button {{action "increment"}}>Add 1</button>
      {{/view}}
    </script>

    <script src="jquery-1.7.2.min.js"></script>
    <script src="handlebars-1.0.rc.1.min.js"></script>
    <script src="ember-1.0.pre.min.js"></script>

    <script>
      Counter = Ember.Object.create({
        value: 1,
      })

      CounterView = Ember.View.extend({
        increment: function(event) {
          Counter.incrementProperty('value');
        }
      })
    </script>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In order to make the event system working, Ember.js needs an application to be created and initialized (the framework does it for you).

    Applying your example to the default Ember.js starting jsfiddle, here is the result:

    Html template:

    <script type="text/x-handlebars" data-template-name="application">
  {{#view MyApp.CounterView}}
    Counter: {{MyApp.counter.value}}
    <button {{action "increment"}}>Add 1</button>
  {{/view}}
</script>

    Javascript:

    //Thanks to @Trek Instructions:
//The following line creates one listener for each user event (e.g. 'click') and
//controls event delegation.
MyApp = Ember.Application.create();

MyApp.counter = Ember.Object.create({
  value: 1
});

MyApp.CounterView = Ember.View.extend({
  increment: function(event) {
    MyApp.counter.incrementProperty('value');
  }
});

    ​
    Working fiddle: http://jsfiddle.net/6p6XJ/260/

    • 0