0

我正在尝试开始使用 ember，但遇到了一个非常奇怪的问题。我在 rails-api 应用程序的上下文中使用 ember。以下代码产生了一个非常意外的结果

<script type="text/x-handlebars" data-template-name="index">
  {{input type="text" value=value action="doSomething"}}
  <button {{action doSomething }}>Button</button>
</script>

当我在输入字段中输入内容并按“返回”时调用该操作，但单击按钮时不会调用该操作。使这种行为更加奇怪的是，当我将它放入 JSFiddle 时，相同的车把模板可以工作。因此，我怀疑问题出在我的 Rails 应用程序中。

我的 Rails 视图如下所示：

<html lang='en'>
  <head>
    <%= stylesheet_link_tag :application, :media => :all %>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
    <script src="//builds.emberjs.com/beta/ember.js"></script>
    <script src="//builds.emberjs.com/beta/ember-data.js"></script>
    <%= javascript_include_tag :application %>
    <title>Title</title>

    <script type="text/x-handlebars" data-template-name="index">
      {{input type="text" value=value action="doSomething"}}
      <button {{action doSomething }}>Button</button>
    </script>

  </head>
  <body>
  </body>
</html>

与相应的 application.js

/*
*= require handlebars
*= require_self
*= require store
*= require routes
*= require_tree ./controllers
*= require_tree ./models
*= require_tree ./templates
*= require_tree ./views
*/

App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_ACTIVE_GENERATION: true
});

App.IndexController = Ember.ArrayController.extend({
  actions: {
    doSomething: function() {
      alert('doSomething()');
    }
  }
});

App.ApplicationAdapter = DS.FixtureAdapter.extend();

也许有人有一个想法或提示如何调试此类问题。谢谢！

4

2 回答 2

0

我仍然不知道问题出在哪里，但是在将包含ember和ember-datafrom移动index.html.erb到后它就消失了application.js。我还添加了 gem ember-rails。

于 2013-10-21T19:19:16.230 回答
0

在您的 rails 视图中，尝试将您的车把模板放在body标签内，而不是head：

<html lang='en'>
  <head>
    <%= stylesheet_link_tag :application, :media => :all %>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
    <script src="//builds.emberjs.com/beta/ember.js"></script>
    <script src="//builds.emberjs.com/beta/ember-data.js"></script>
    <%= javascript_include_tag :application %>
    <title>Title</title>
  </head>
  <body>

    <script type="text/x-handlebars" data-template-name="index">
      {{input type="text" value=value action="doSomething"}}
      <button {{action doSomething }}>Button</button>
    </script>

  </body>
</html>

更新以回应您的评论

要跟踪单击按钮，您可以像这样注册到click事件IndexView并设置断点以进一步检查：

App.IndexView = Ember.View.extend({
  click: function(event) {
    debugger;
  }
});
于 2013-10-13T19:34:37.443 回答