rails涡轮链接问题:create.js.erb/update.js.erb在页面加载时再次运行

Question

我有一个带有简单任务模型的rails应用程序。AJAX通过任务索引页上的引导模式创建任务。

任务创建/更新似乎可以很好地将@Task部分附加到create.js.erb中，但如果在创建或更新后我转到另一个页面，然后返回到任务索引页面，那么create.js.erg和update.js.erg将再次运行。

我可以看到它，因为我正在使用fadeIn进行更新和创建。这意味着对于创建，有两次相同的任务，第一次是由服务器根据GET请求加载的（我需要的），其中一次由于create.js.erb而获得"fadeIn"。对于更新，新更新的任务将消失，并在任务索引页再次加载时获得"fade In"。

我尝试了jquery.turbolink，但在创建和更新fadeIn时，我有3次相同的任务，所以它只会让情况变得更糟。也尝试过<%="data no turbulink"if request.post？%>在应用程序布局中的body标签中，但对该标签没有影响。

app.js

//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.remotipart
//= require chat
//= require refile
//= require bootstrap-sprockets
//= require private_pub
//= require turbolinks
//= require_tree .

views/tasks/create.js.erb

var ready = function () {
    //empty modal error list
    $("ul.errors").html("");
    <% if @task.errors.any? %>
        //modal error messages get inserted via AJAX
        $('.alert-danger').show();
        $('ul.errors').show();
        <% @task.errors.full_messages.each do |message| %>
            $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
        <% end %>
    <% else %>
        //hiding modal on creation and setting values to zero for optional new modal
        $('ul.errors').hide();
        $('.alert-danger').hide();
        $("#newtask").modal('hide');
        $(".task_name_company").val('');
        $(".contentarea").val('');
        $(".task_deadline").val('');
        //different div class for different partials (.newtaskinsert and .newtaskinsert2 divs are on different pages) + table rows get inserted into view via AJAX
        $(".newtaskinsert").prepend('<%= j render @task %>');
        $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
        $("#task_<%= @task.id %>").hide().fadeIn(1000);
        //26= pagination(12)*every task has 2 tr(2)+ extra task that must be hidden(2)=12*2+2
        var n = $('tr').length;
        if (n > 26) {
            $("tr").slice((-2*(n-26)/2)-1).fadeOut(500);
        };
    <% end %>
};
$(document).ready(ready);
$(document).on('page:load', ready);

views/tasks/update.js.erb

var ready = function () {
    $("ul.errors").html("");
    <% if @task.errors.any? %>
        //modal error messages get inserted via AJAX
        $('.alert-danger').show();
        $('ul.errors').show();
        <% @task.errors.full_messages.each do |message| %>
            $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
        <% end %>
    <% else %>
        $('ul.errors').hide();
        $('.alert-danger').hide();
        $('#updatetask_<%= @task.id %>').modal('hide');
        $('#task_<%= @task.id %>').fadeOut(400, function(){
            $(this).remove();
            $(".newtaskinsert").prepend('<%= j render @task %>');
            $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
    });
     <% end %>
};
$(document).ready(ready);
$(document).on('page:load', ready);

task.js

  var ready = function() {
    //choosing user on task creation
    $('.task_name_company').autocomplete({
    source: "/users/:user_id/tasknamecompanies"
    });
    //unfocus the newtask button after modal closing
    $('#newtask').on('shown.bs.modal', function (e) {
    $('.newbutton').one('focus', function (e) {
        $(this).blur();
        });
    });
    //when modal closes error messages get hidden
    $('#newtask').on('hidden.bs.modal', function (e) {
        $('.alert-danger').hide();
    });
};
$(document).ready(ready);
$(document).on("page:load", ready);

Answer 1

因此，对于您的create.js.erb和update.js.erb，我认为您不需要将其作为var ready包含。

只需在没有function()的情况下包含：

var ready = function () {

$("ul.errors").html("");
<% if @task.errors.any? %>
    //modal error messages get inserted via AJAX
    $('.alert-danger').show();
    $('ul.errors').show();
    <% @task.errors.full_messages.each do |message| %>
        $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
    <% end %>
<% else %>
    $('ul.errors').hide();
    $('.alert-danger').hide();
    $('#updatetask_<%= @task.id %>').modal('hide');
    $('#task_<%= @task.id %>').fadeOut(400, function(){
        $(this).remove();
        $(".newtaskinsert").prepend('<%= j render @task %>');
        $(".newtaskinsert2").prepend('<%= j render partial: "tasks/task_between", locals: { task: @task } %>');
    });
 <% end %>

});

因此，还可以删除这些文件中的$(document).ready(ready);$(document).on('page:load');。

在task.js中，您可以尝试使用$(document).on("ready page:load", ready);作为一个函数调用。