javascript - 在 Ruby on Rails 中包含 Trianglify

标签 javascript ruby-on-rails ruby html css

我正在尝试使用 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

最佳答案

啊啊,我通过将 js 放在 app/assets/javascripts/ 目录中并将调用 Trianglify 的脚本放在body 标签,因为在 document.body.appendChild(pattern.canvas()) 试图附加 child 时,没有现成的 body。希望对您有所帮助。

关于javascript - 在 Ruby on Rails 中包含 Trianglify,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30002657/

相关文章:

mysql - Rails 加入协会并计数

ruby-on-rails - Rails 重定向到 REST

javascript - 如果输入有值,jquery 显示表行。错误的 keyup 函数

javascript - msFullscreenEnabled 的规范是什么

javascript - onclick 需要 3 次点击才能完成事件

javascript - 单击任何其他项目时应该失去焦点

ruby-on-rails - 更新事件存储附件文件名

ruby-on-rails - 无法在 OSX 10.11.3 上安装 Puma gem

ruby-on-rails - 如何在 Rails 中使用关联搜索 group_by

ruby - 使用 Ruby/Sinatra 和 JRuby 或 Scala 构建 REST API