ruby-on-rails - 带有 turbolinks 的 Rails 4，嵌入式要点不起作用

Question

当尝试嵌入要点然后通过 turbolinks 访问页面时，它只是空的，没有任何显示。

当完全重新加载访问同一页面时，它可以工作。

关于如何让它发挥作用的任何想法？

Answer 1

制作一个新文件，例如gist.js.coffee并在其中添加以下咖啡脚本

$ ->
  loadGists()
  $(document).on 'page:load', loadGists

loadGists = ->
  $('.gist').each ->
    loadGist $(this)

loadGist = ($gist) ->
  callbackName = 'c' + Math.random().toString(36).substring(7)

  window[callbackName] = (gistData) ->
    delete window[callbackName]
    html = '<link rel="stylesheet" href="' + encodeURI(gistData.stylesheet) + '"></link>'
    html += gistData.div
    $gist.html html
    script.parentNode.removeChild script

  script = document.createElement 'script'
  script.setAttribute 'src', [
    $gist.data('src'), 
    $.param(
      callback: callbackName
      file: $gist.data('file') || ''
    )
  ].join '?'
  document.body.appendChild script

接下来，将所有 gist 脚本标签更改为具有 gist 类和 URL 和文件名的数据属性的 div。此外，请使用 .json 扩展名而不是 .js。

<!-- before -->
<script src="https://gist.github.com/username/gist_id.js"></script>
<script src="https://gist.github.com/username/gist_id.js?file=file_name"></script>

<!-- after -->
<div class="gist" data-src="https://gist.github.com/username/gist_id.json"></div>
<div class="gist" data-src="https://gist.github.com/username/gist_id.json" data-file="file_name"></div>

那应该可以解决您的问题。查看我写的关于使用 github 嵌入式 gists 和 turbolinks的完整教程

Answer 2

来自 Turbolinks 的文档：

Turbolinks 将评估它访问的页面中的任何脚本标签，如果这些标签没有类型或者类型是 text/javascript。所有其他脚本标签将被忽略。

因此，看起来通过放入<script src="gist.github.com/foobar/123.js"></script>您返回的 html，turbolinks 会尝试评估它，而不仅仅是显示其内容。尝试将其嵌入到其他链接中 ( https://gist.github.com/xxx/yyyyy)