如何使这个JS Turbolinks友好？
这是我的main.js文件：
jQuery(function($) { $('LI.tree-item-name').has('ul').click(function() { if ($(this).hasClass('opened')) { $(this).find('UL').slideUp(); $(this).removeClass('opened'); } else { $(this).find('UL').slideDown(); $(this).addClass('opened'); } return false; }); $('LI.tree-item-name li').click(function(e) { e.stopPropagation(); }) }); jQuery(window).load(function(){ jQuery('#video').removeClass('loading'); jQuery('#video .box').animate({'opacity' : '1'}); var $container = jQuery('#video'); $container.masonry({ columnWidth: 299, itemSelector: '.box' }); jQuery('.popupbox').click(function(){ jQuery('.popup:visible').fadeOut(); var id = '#'+jQuery(this).data('popup'); jQuery('#overlay').fadeIn(); jQuery(id).css('top', jQuery(window).height()/2 - jQuery(id).height()/2).fadeIn(); return false; }); jQuery('.profile_popupbox').click(function(){ jQuery('.popup:visible').fadeOut(); var id = '#'+jQuery(this).data('popup'); jQuery('#overlay').fadeIn(); jQuery(id).css({'top': "20px", 'left': "-200px"}).fadeIn(); return false; }); jQuery('#overlay').click(function(){ jQuery('.popup:visible').fadeOut(); jQuery(this).fadeOut(); }); });
我很乐意这是Turbolinks友好的。
我尝试过：
var ready; ready = jQuery(window).load(function(){ jQuery('#video').removeClass('loading'); jQuery('#video .box').animate({'opacity' : '1'}); var $container = jQuery('#video'); $container.masonry({ columnWidth: 299, itemSelector: '.box' }); jQuery('.popupbox').click(function(){ jQuery('.popup:visible').fadeOut(); var id = '#'+jQuery(this).data('popup'); jQuery('#overlay').fadeIn(); jQuery(id).css('top', jQuery(window).height()/2 - jQuery(id).height()/2).fadeIn(); return false; }); jQuery('.profile_popupbox').click(function(){ jQuery('.popup:visible').fadeOut(); var id = '#'+jQuery(this).data('popup'); jQuery('#overlay').fadeIn(); // jQuery(id).css('top', jQuery(window).height() - jQuery(id).height()/2).fadeIn(); jQuery(id).css({'top': "20px", 'left': "-200px"}).fadeIn(); return false; }); jQuery('#overlay').click(function(){ jQuery('.popup:visible').fadeOut(); jQuery(this).fadeOut(); }); }); $(document).ready(ready); $(document).on('page:load', ready);
这不起作用，并没有使Turbolinks友好的两个function。
所以我想让整个文件TL友好。
编辑1
我也有一个upload.js.erb有这个，在初始页面加载后没有执行：
$("#myVCModal").html(""); $("#myModal").html(""); $("#add-video-step-1").html(""); $("#video-comment").html(""); $('myModalPL').modal(show); Ladda.bind('button');
我希望我的应用程序中的所有这些JS位都能恢复工作。
编辑2
所以现在我有main.js工作 – 谢谢@ User089247。 但是执行JS的其他模式根本不起作用….即编辑1下的代码。
发生了什么事我点击了这个上传按钮：
<%= link_to " Upload".html_safe, "#", class: "upload popupbox", data: { popup: "add-video-step-1"} %>
这是被解雇的模式：
Upload a Video
Step 1 of 2 - TEST
true) do |f| %>
然后当你按“添加video”时，它会带你到第二个模态，这是：
Upload your Video
Step 2 of 2 - TEST
true do %> Step 2 of 2
我想问题是我没有看到这个第二模态将如何执行，基于我的upload.js.erb还是我错过了什么？
编辑3
以下是完成此上传video操作时服务器日志的相关部分（为简洁起见，将其截断）：
Started POST "/family_trees/1/videos" for 127.0.0.1 at 2014-10-28 02:16:48 -0500 Processing by VideosController#create as JS Parameters: {"utf8"=>"✓", "video"=>{"title"=>"Hello there", "description"=>"Why hello there lady", "circa"=>"", "user_ids"=>[""]}, "commit"=>"Add Video", "family_tree_id"=>"1"} User Load (3.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = 1 ORDER BY "users"."id" ASC LIMIT 1 FamilyTree Load (1.2ms) SELECT "family_trees".* FROM "family_trees" WHERE "family_trees"."user_id" = $1 LIMIT 1 [["user_id", 1]] ReadMark Load (1.0ms) SELECT "read_marks".* FROM "read_marks" WHERE "read_marks"."user_id" = $1 AND "read_marks"."readable_type" = 'PublicActivity::ORM::ActiveRecord::Activity' AND "read_marks"."readable_id" IS NULL ORDER BY "read_marks"."id" ASC LIMIT 1 [["user_id", 1]] FamilyTree Load (1.0ms) SELECT "family_trees".* FROM "family_trees" WHERE "family_trees"."id" = $1 LIMIT 1 [["id", 1]] (1.2ms) SELECT COUNT(*) FROM "roles" INNER JOIN "users_roles" ON "roles"."id" = "users_roles"."role_id" WHERE "users_roles"."user_id" = $1 AND (((roles.name = 'admin') AND (roles.resource_type IS NULL) AND (roles.resource_id IS NULL))) [["user_id", 1]] Membership Load (1.7ms) SELECT "memberships".* FROM "memberships" WHERE "memberships"."user_id" = 1 AND "memberships"."family_tree_id" = 1 (3.6ms) BEGIN SQL (3.4ms) INSERT INTO "videos" ("created_at", "description", "title", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id" [["created_at", "2014-10-28 07:16:48.340452"], ["description", "Why hello there lady"], ["title", "Hello there"], ["updated_at", "2014-10-28 07:16:48.340452"]] (4.5ms) COMMIT Redirected to http://localhost:3000/ Completed 302 Found in 40ms (ActiveRecord: 20.6ms) Started GET "/" for 127.0.0.1 at 2014-10-28 02:16:48 -0500 User Load (4.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = 1 ORDER BY "users"."id" ASC LIMIT 1 Processing by DashboardController#index as JS
对于它的价值，即使它成功完成处理此GET "/"请求后，它实际上并不重新加载/重定向浏览器。 它只是停留在模态。
JS控制台中的错误说：
Failed to load resource: net::ERR_CACHE_MISS
这是VideoController#Create
def create authorize! :read, @family_tree @video = Video.new(video_params) respond_to do |format| if @video.save format.html { redirect_to root_path } format.json { render action: 'show', status: :created, location: @video } else format.html { render action: 'new' } format.json { render json: @video.errors, status: :unprocessable_entity } end end
将你的main.js更改为this（我更喜欢这种方式，因为它很容易调试jQuery中的问题而不会迷失在方法网络中，并且它非常适用于turbolinks而不添加jquery-turbolinks gem）：
$(document).on("page:change", function(){ MainJS.init(); }); MainJS = { init: function() { MainJS.initializePage(); $('.popupbox').on('click', MainJS.popupBox); $('.profile_popupbox').on('click', MainJS.profilePopupbox); $('#overlay').on('click', MainJS.overLay); $('LI.tree-item-name').has('ul').on('click', MainJS.treeItemName); $('LI.tree-item-name li').on('click', function(ev) { ev.stopPropagation(); }); }, initializePage: function(){ $('#video').removeClass('loading'); $('#video .box').animate({'opacity' : '1'}); var $container = $('#video'); $container.masonry({ columnWidth: 299, itemSelector: '.box' }); }, popupBox: function(){ $('.popup:visible').fadeOut(); var id = '#'+$(this).data('popup'); $('#overlay').fadeIn(); $(id).css('top', $(window).height()/2 - $(id).height()/2).fadeIn(); return false; }, profilePopupbox: function(){ $('.popup:visible').fadeOut(); var id = '#'+$(this).data('popup'); $('#overlay').fadeIn(); // $(id).css('top', $(window).height() - $(id).height()/2).fadeIn(); $(id).css({'top': "20px", 'left': "-200px"}).fadeIn(); return false; }, overLay: function(){ $('.popup:visible').fadeOut(); $(this).fadeOut(); }, treeItemName: function(){ if ($(this).hasClass('opened')) { $(this).find('UL').slideUp(); $(this).removeClass('opened'); } else { $(this).find('UL').slideDown(); $(this).addClass('opened'); } return false; } }
现在，如果您可以轻松调试上面的代码，以查看哪个部分正在工作/不工作，例如：
$(document).on("page:change", function(){ MainJS.init(); console.log('MainJS.init() was called successfully); });
要么：
MainJS = { init: function() { MainJS.initializePage(); $('.popupbox').on('click', MainJS.popupBox); $('.profile_popupbox').on('click', MainJS.profilePopupbox); $('#overlay').on('click', MainJS.overLay); console.log('MainJS initialization was successful.'); },
等等。 你明白了，对吗？
关于你的upload.js.erb问题，我不确定那里有什么问题，因为它应该工作（同样适用于我），但是，你可以包装你的代码： $(document).on("page:change", function(){看看它是否有效，但我怀疑它不是问题所在。