javascript - Rails - Javascript 不会通过 link_to 渲染，但通过正常的创建操作可以正常工作

Question

遇到一个非常奇怪的错误，希望有人能提供一些线索。

我希望 Rails 从数据库中返回随机的 Tweet 记录，因此在我的 Tweet Controller 的 new 方法中，我有以下内容。

def new
  @tweet = Tweet.new
  @random_tweet = Tweet.order("RANDOM()").first
end

在我的view.html.erb中，我想将link_to定向到显示页面@random_tweet的任何内容，所以我有

view.html.erb

<%= form_for @tweet do |f|%>
  <%= f.text_field :handle%>
  <%= f.submit "Let's Go!", class: "btn btn-lg btn-danger"%>
<% end%>

# returns a random Tweet record
<%=link_to @random_tweet.handle, @random_tweet %>

该链接工作正常，它将我重定向到任何 @random_tweet 的显示页面。问题是，在每个显示页面上，都有一个我使用 d3 和推文中的数据构建的 JavaScript 图表。

如果我搜索一条推文，图表将毫无问题地显示。但是，如果我通过 @random_tweet 链接进入显示页面，它会显示除图表之外的所有内容。

知道会发生什么吗？谢谢。

如果您需要我的整个 Controller ，就在下面。 gon 只是我用来在 javascript 和 Controller 之间传递变量的 gem。

推文 Controller

class TweetsController < ApplicationController
    require 'indico'

    def new
        @tweet = Tweet.new

        #following only works with Postgres
        @random_tweet = Tweet.order("RANDOM()").first

    end

    def create
        @tweet = Tweet.new(tweets_params)

        if Tweet.exists?(:handle => @tweet.handle)
            @original_tweet = Tweet.find_by_handle(@tweet.handle)
            redirect_to @original_tweet
        elsif @tweet.save
            redirect_to @tweet
        else
            render 'new'
        end

    end

    def show

        Indico.api_key = ENV["indico_key"]
        @tweet = Tweet.friendly.find(params[:id])
        current_tweets = $client.search("#{@tweet.handle} -rt", result_type: "recent", lang: "en")

        @tweets_array = Tweet.get_tweets_array(current_tweets)

        tweets_array_val_json = Tweet.get_tweets_json(@tweets_array)
        gon.senti_array = tweets_array_val_json

    end

    private

    def tweets_params
        params.require(:tweet).permit(:handle)
    end
end

graph.js

$(document).ready(function() {
    var data = gon.senti_array;


    var x = d3.scale.linear()
        .domain([0, d3.max(data)])
        .range([0, 800]);



    d3.select(".chart")
      .selectAll("div")
      .data(data)
      .enter().append("div").attr("class", "bar")
      .style("width", function(d) { return x(d) + "px"; })
      .text(function(d) { return d; });

    var divs = document.getElementsByClassName('bar') // this needs to change based on how you want to select the generated elements

    for(var i=0; i< divs.length; i++) {
      var text = divs[i].innerText;

      divs[i].innerHTML = '<a href=#tweet_'+i+' >'+text+'</a>'
    }
});

Answer 1

您的问题是由 turbolinks 引起的，当您访问链接时，它可以通过保持页面事件并仅替换正文来帮助您的应用程序更快。

这有时会导致 JavaScript 事件无法按预期工作的问题。

您可以完全关闭 Turbolinks，或者如果您想要它提供的速度提升，请尝试使用它的事件，所以不要:

$(document).ready(function() {});

尝试使用:

$(document).on("page:change", function() {});

您可以看到事件列表here .