Ember.js活动无法正常工作

时间:2012-12-27 02:25:45

标签: javascript ember.js

我写了这个非常简单的Ember代码,但由于某种原因,当按下按钮时事件似乎没有激发。有什么提示吗?

<!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>

2 个答案:

答案 0 :(得分:3)

为了使事件系统正常工作,Ember.js需要创建和初始化应用程序(框架为您完成)。

将您的示例应用于从jsfiddle开始的默认Ember.js,结果如下:

Html模板:

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

工作小提琴:http://jsfiddle.net/6p6XJ/260/

答案 1 :(得分:1)

我建议你阅读http://trek.github.com/,特别是“最小的可行的灰烬应用”部分。

从1.0.pre开始,Ember应用程序需要存在路由器。但是,网上的大多数文档/示例都是指0.9.5时代

trek guide + ember docs是一个从框架开始的好方法。