Rails 中不引人注目的切换失败

Question

我已经这样做了几个小时，但它就是不起作用。我正在尝试使用 Scriptaculous 的效果库让 ToggleJS 工作。具体来说，示例： http://wiseheartdesign.com/page_attachments/0000/0075/demo .html。

我使用一个名为 new.html 的纯 html 文件让它工作得很好。然后我将其转换为 new.html.erb，这样我就可以将一些动画合并到我的 Rails 项目中，但它停止工作了！

我尝试了 html 和 ruby​​ javascript 标签，但都不起作用，例如：

<%= javascript_include_tag "application", "prototype", "effects", "lowpro", "toggle" %>

页面的正文显示在浏览器上，但没有动画。我已经确保我的 javascript 文件与演示相同（另外，html 文件无论如何都可以使用它们）。您知道我的 .erb 文件问题出在哪里吗？

我正在使用的 html 示例：

<h3>Toggle.LinkBehavior</h3> 
    <div class="expand_me" id="one">Expanded!</div> 
    <p> 
      <a class="toggle" href="#one" rel="toggle[one]">Expand</a> 
    </p> 
    <div class="expand_me" id="two">Expanded! 1</div> 
    <div class="expand_me" id="three">Expanded! 2</div> 
    <p> 
      <a class="toggle" href="#two" rel="toggle[two,three]">Expand even more</a> 
    </p> 

#Application.js
Event.addBehavior({
   'a.toggle': Toggle.LinkBehavior(),
   'a.inverted_toggle': Toggle.LinkBehavior({invert: true}),
   'a.open': Toggle.LinkBehavior({
  effect: 'blind',
  onLoad: function(link) {
    this.toggle();
  },
  beforeToggle: function(link) {
    link.innerHTML = (link.innerHTML == "Open") ? "Opening..." : "Closing...";
  },
  afterToggle: function(link) {
    link.innerHTML = (link.innerHTML == "Opening...") ? "Close" : "Open";
  }
   }),
   'form input.checkbox.toggle': Toggle.CheckboxBehavior(),
   'form input.checkbox.inverted_toggle': Toggle.CheckboxBehavior({invert: true}),
   'form .radio_group.toggle': Toggle.RadioGroupBehavior({effect: 'blind'}),
   'form select.toggle': Toggle.SelectBehavior()
 });

Eimantas，我对此完全是新手。我在我的 html 文档中添加了以下内容，但它不起作用：

<script type="text/javascript">
window.onload = Event.addBehavior
</script>

这就是您的意思吗？或者您能告诉我需要在 .html.erb 文件中编写哪些代码吗？

Answer 1

你能粘贴为 javascript 文件生成的 html 吗？

我认为您的 toggle.js 加载时间晚于 application.js 文件，因此如果 application.js 具有所有挂钩代码 (window.onload...) 用于切换效果，它将失败，因为库本身尚未加载。

更新：

以下是如何将 Event.addBehavior 放入窗口加载：

<script type="text/javascripts">
  window.onload = function() {
    Event.addBehavior({
      // all params and code.
    });
  }
</script>

您应该检查有关执行原型样式 window.onload 函数的原型文档。