我试图组织JS文件"rails way"时,在我的Rails 4应用程序中遇到了一个问题.他们以前分散在不同的观点中.我将它们组织成单独的文件,并使用资产管道进行编译.但是,我刚刚了解到,当打开turbo-linked时,jQuery的"就绪"事件不会触发后续点击.第一次加载页面时它可以工作.但是当你点击链接时,内部的任何内容ready( function($) {都不会被执行(因为页面实际上并没有再次加载).好解释:这里.
所以我的问题是:在启用turbo-links时,确保jQuery事件正常工作的正确方法是什么？您是否将脚本包装在特定于Rails的侦听器中？或者也许rails有一些魔力让它变得不必要？文档对于它应该如何工作有点模糊,特别是关于通过像application.js这样的清单加载多个文件.
我正在构建一个Rails 4应用程序,我有一些分散的js文件,我试图包括"rails方式".我将jquery插件移动到/ vendor/assets/javascripts中,并更新了清单(application.js)以要求它们.当我在本地加载页面时,我看到它们正确显示.
但是,我从其中一个已编译的脚本中获得了不一致的行为.我有一个名为projects.js的特定于控制器的js文件,它通过以下方式在application.js中引用require_tree .:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap.min
//= require jquery.form.min
//= require_tree .
我看到文件被正确包含,并且它的工作时间有一半.另一半时间,projects.js中的东西似乎没有做任何事情(它主要是jquery动画和一些ajax请求).当它不起作用时,我会点击按钮几次,什么都不会发生,然后我会抛出这个错误:
Uncaught TypeError: Cannot read property 'position' of null
turbolinks.js?body=1:75
当脚本处于各个视图(错误的方式)时,这种情况从未发生过,所以我很确定问题不在于我的javascript代码.另一个可能相关的细节是projects.js中的东西被包装在一个$(document).ready(function(){.此外,我正在开发模式下进行测试,因此javascripts和css不会被资产管道组合.
知道这里发生了什么吗？我是Rails的新手,但我已尽力遵守所有惯例.
更新!
当我的项目脚本不起作用时,它是可预测的.第一页加载每次都有效.然后我点击一个链接到一个使用我的project.js行为的新页面,第二个页面永远不会工作.我点击几次,最终抛出上面的错误.我仍然不确定为什么,但我怀疑这与涡轮连接有关.
在Rails 3中,将:confirm参数传递给link_to将填充链接的data-confirm属性.这将在单击链接时引发JS alert().
我正在使用rails jQuery UJS适配器(https://github.com/rails/jquery-ujs).rails.js的相关代码是:
$('body').delegate('a[data-confirm], button[data-confirm], input[data-confirm]', 'click.rails', function () {
var el = $(this);
if (el.triggerAndReturn('confirm')) {
if (!confirm(el.attr('data-confirm'))) {
return false;
}
}
});
和
triggerAndReturn: function (name, data) {
var event = new $.Event(name);
this.trigger(event, data);
return event.result !== false;
}
我想知道如何修改它以产生一个jQuery对话框(例如jQuery UI对话框),允许用户确认或取消.
我对JavaScript的了解不足以实现这一目标.我目前的方法是简单地重写$('body').delegate()函数来实例化灯箱.但是我想,有一种比这更有效的方法.
我在我的应用程序中使用Rails jquery ujs来处理ajax.我也使用一个confirm选项来销毁任何记录.作为我目前的设置,我点击data-remote=true链接时连接了一个加载覆盖屏幕.
我想知道的是:当用户点击cancel确认框并且我可以关闭加载器覆盖时,有没有办法可以挂钩回调事件.