javascript - 我如何使这个 JS Turbolinks 友好？

Question

这是我的 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 友好。

所以我只想让整个文件对 TL 友好。

编辑 1

我还有一个 upload.js.erb，它有这个，在初始页面加载后不会执行:

$("#myVCModal").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#myModal").html("<%= escape_javascript(render 'videos/upload_video') %>");

$("#add-video-step-1").html("<%= escape_javascript(render 'videos/upload_video') %>");
$("#video-comment").html("<%= escape_javascript(render 'videos/upload_video') %>");
$('myModalPL').modal(show);

Ladda.bind('button');

我希望我的应用程序中的所有这些 JS 位都能恢复工作。

编辑2

所以现在我有 main.js 的东西在工作 - 谢谢 @User089247。但是其他执行 JS 的模态根本不起作用....即编辑 1 下的代码。

发生的事情是我点击了这个上传按钮:

<%= link_to "<i class='fa fa-film fa-lg'></i> Upload".html_safe, "#", class: "upload popupbox", data: { popup: "add-video-step-1"} %>

这是被触发的模式:

<div id="overlay">&nbsp;</div>
<div class="popup" id="add-video-step-1">
  <div class="titles clearfix">
      <h2>Upload a Video</h2>
      <p><i>Step 1 of 2 - TEST</i></p>
  </div>
  <div class="content">
    <% if @family_tree %>
      <%= simple_form_for([@family_tree, @video], :remote => true) do |f| %>
        <div class="column">
              <div class="f-row">
                  <%= f.input :title, label: "Title:" %>
              </div>
              <div class="f-row">
                  <%= f.input :description,label: "Description:" %>
              </div>
              <div class="f-row">
                  <%= f.input :circa, as: :datepicker, start_year: Date.today.year - 5, label: "Circa:" %>
              </div>
              <div class="f-row">
                  <label for="family">Family in this video:</label>
                  <%= f.collection_select :user_ids, @family_tree.members.order(:first_name), :id, :first_name, {}, {multiple: true} %>
              </div>
          </div>
          <%= f.button :submit, "Add Video" %>
        <% end %>
      <% end %>
    </div> <!-- //content -->
</div> <!-- //popup -->

然后当您按下“添加视频”时，它应该将您带到第二个模态:

<div class="bootstrap-styles">
 <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Upload your Video</h3>
    <p><i>Step 2 of 2 - TEST</i></p>
  </div>
  <div class="modal-body">
    <div class="form">
      <%= form_tag @upload_info[:url], :multipart => true do %>
        <div>Step 2 of 2</div>
        <%= hidden_field_tag :token, @upload_info[:token] %>
        <%= file_field_tag :file, title: 'Choose video to upload' %>
        <p class="uploader">
          <button class="btn btn-success ladda-button" data-color="green" data-style="expand-left"><span class="ladda-label">Upload Video</span><span class="ladda-spinner"></span></button>
        </p>
      <% end %>

    </div>
  </div>
  <div class="modal-footer">
  </div>
</div>

我想问题是我没有看到根据我的 upload.js.erb 这第二个模态将如何执行，或者我是否遗漏了什么？

编辑3

以下是此上传视频操作完成后服务器日志的相关部分(为简洁起见被 chop ):

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

就其值(value)而言，即使在成功处理完此 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

Answer 1

将您的 main.js 更改为此(我更喜欢这种方式，因为它很容易调试 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(){ 看看它是否有效，但我怀疑这不是问题所在。