Question

我正在尝试使用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();

也许某人有想法或暗示如何调试此类问题。谢谢！

Answer 1

在导轨视图中，尝试将把手模板放在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;
  }
});

Answer 2

我仍然不知道问题是什么，但在将ember和ember-data从index.html.erb移至application.js后，它仍然消失了。我还添加了gem ember-rails。

ember - 控制器动作仅由输入字段调用，而不是由按钮调用

2 个答案:

更新以回应您的评论