Question

使用Ember，我想制作一个包含一些表单元素的模态，包括单选按钮和文件选择器。我从Ember文档中跟随this guide来创建一个简单的模态，但是当我向它添加无线电和文件选择器时，它们无法正常工作。在Chrome中，您可以选择初始单选按钮，但无法更改选择。在Firefox中，您甚至无法选择初始的。在这两种浏览器中，文件选择器按钮都不执行任何操作。

查看我的JSBin，这是基于我在第一段中链接的指南中的{{3}}。我所做的只是将单选按钮和文件选择器添加到模态（它们被破坏的地方）和索引模板（它们工作正常）。

那么，为什么单选按钮或文件选择器不能在模态中工作？我该如何解决？

Answer 1

想出来。 {{action}}帮助程序隐式调用preventDefault()，因此<div {{action}}>的子项点击次数未显示其默认行为。要解决此问题，必须在父元素上执行<div {{action preventDefault=false}}>。请参阅：http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_event-propagation

请注意，在Ember 1.0.0（我的原始JSBin使用的）和1.2.0中，这似乎已被打破（或尚未实现），但它在1.3.0中运行良好。仅仅为了测试，这里有一个更小的JSBin用1.3.0显示它：http://jsbin.com/ucanam/3038/edit

Answer 2

该手册存在问题，叠加层实际上阻止了点击模式的点击。

  <script type="text/x-handlebars" id="components/modal-dialog">
    <div class="overlay">
      <div class="modal">
        {{yield}}
      </div>
    </div>
  </script>

http://emberjs.jsbin.com/IvASIHed/5/edit

某些HTML表单元素在Ember模式中不起作用

2 个答案: