在 Ruby on Rails 中包含 Trianglify答案

【问题标题】：Including Trianglify in Ruby on Rails在 Ruby on Rails 中包含 Trianglify
【发布时间】：2015-05-02 13:06:38
【问题描述】：

我正在尝试使用 trianglify 制作背景。为此，我必须将它包含在我的项目中并正确使用它。我想要实现的目标是制作一个应该像 trianglify 这样的背景。

这是我的 application.html.erb

 <!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag "application", media: "all",
                                           "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>



  </head>
  <body>

    <%= render 'layouts/header' %>
    <div class="container">
     <div class="row">
      <% flash.each do |message_type, message| %>
        <div class="alert alert-<%= message_type %>"><%= message %></div>
      <% end %>
      <%= yield %>
     </div>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
    </div>

  </body>



</html>


<script>
    var Trianglify = require([]);
    var pattern = Trianglify({
        width: window.innerWidth, 
        height: window.innerHeight
    });
    document.body.appendChild(pattern.canvas())
</script>

显然它没有放背景图片。我检查了检查员，我得到了

    ReferenceError: require is not defined trianglify.js:8:4
ReferenceError: require is not defined localhost:3000:32:8

我猜它没有导入某些东西或者我做错了什么？

为了解决这个错误，我下载了http://requirejs.org/docs/release/2.1.17/comments/require.js，现在我得到另一个错误：

Error: Module name "delaunay-fast" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded require.js:167:16
Error: Module name "trianglify" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded

【问题讨论】：

为什么要“导入”两次？你只需要一个。 trianglify.min.js = trianglify.js
已修复，但错误仍然相同
我确实在我的 application.js 中写了这个 *= require_trianglify
好吧，我是在你告诉我是否这样做之后才提出的，是的，它并没有改变任何可悲的事情。
无论如何，我在背景上唯一的东西就是颜色。我不认为它因为错误而添加了画布。但老实说，我不知道如何检查是否添加了画布，介意告诉我如何吗？

标签： javascript ruby-on-rails ruby html css

【解决方案1】：

啊，我得到了你的代码，通过将该 js 放在 app/assets/javascripts/ 目录中并将调用 Trianglify 的脚本放在 body 标记的末尾下方，因为当时 document.body.appendChild(pattern.canvas()) 正在尝试附加孩子没有现有的身体。希望对您有所帮助。

【讨论】：

在资产目录中的确切位置以及如何：D？
在app/assets/javascripts/ 目录并从您的.erb 文件中删除该js 文件的cdn 链接。
但是你怎么把它放在 application.js 中？ :D 那是我不知道的
你不能只用添加它
<%= javascript_include_tag "application" %> 添加位于app/assets/javascripts/ 的每个js文件，所以你不需要这样做。