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

ember - Controller action is only called by input field but not by button

本文关键字：调用 按钮 字段 输入 控制器 操作 ember      更新时间：2023-09-26

我正在尝试开始使用余烬，但我遇到了一个非常奇怪的问题。我在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 应用程序中的某个地方。

我的轨道视图如下所示：

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

与相应的应用程序.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();

也许有人有一个想法，或者可能有一个提示如何调试这种问题。谢谢！

在您的轨道视图中，尝试将车把模板放在 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>

更新以响应您的评论

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

App.IndexView = Ember.View.extend({
  click: function(event) {
    debugger;
  }
});

我仍然不知道问题是什么，但是将ember和ember-data的包含从index.html.erb移动到application.js后，它消失了。我还添加了宝石ember-rails.

相关文章：