显示未出现在Rails应用程序中

Showdown Not Appearing in Rails App

本文关键字：Rails 应用程序 显示      更新时间：2023-09-26

我是第一次使用showdown-rails gem，在让它出现时遇到了一些问题。我按照GitHub页面上的说明完成了gem的安装，包括在我的application.js文件中的//= require showdown。我在wikis#edit/wikis#new页面上的_form部分中使用它，使用以下代码：

<%= form_for(@wiki) do |f| %>
  <%= f.label :title %><br>
  <%= f.text_field :title, class: "form-control" %>
  <%= f.label :body %><br>
  <%= f.text_area :body, class: "form-control", style: "height: 250px", id: "wiki_body" %>

  <% if current_user.admin? || current_user.premium? %>
    <%= f.label :private, class: 'checkbox' do %>
      <%= f.check_box :private %> Make Wiki Private
    <% end %>
  <% end %>
  <% if @wiki.private? %>
    <%= f.label "Add Collaborators", class: 'checkbox' %>
    <div style="height: 80px; overflow: scroll; border: thin grey solid; padding-left: 10px">
      <% @users.each do |user| %>
        <%= check_box_tag "wiki[user_ids][]", user.id, @wiki.users.include?(user) %>
        <%= user.name %><br>
      <% end %>
    </div>
  <% end %>
  <script>
    var converter = new showdown.Converter();
    $('#wiki_body').on('keyup', function() {
      var mdown = $(this).val();
     $('#wiki_preview').html(converter.makeHtml(mdown));
    });
  </script>
  <div class="well" style="margin-top: 20px">
    <p id="wiki_preview"></p>
  </div> <!-- showdown well -->
  <div class="text-center">
    <%= f.submit "Create Wiki", class: "btn-custom" %>
  </div> <!-- text-center -->
<% end %>

井会出现，但应该渲染的实际文本Showdown永远不会出现。这是我第一次使用宝石，所以我不确定哪里出了问题。有人能在这里指出我的错误吗？

虽然这个问题有点老，但我也有同样的问题，因为还没有答案，所以我想分享我的结果。

首先，最好不要直接在视图中编写JavaScript，但应该使用assets/javascript子目录下的相应文件，即assets/javascripts/wiki.js。

其次，我遇到了rails问题，无法在安装的版本中正确加载导入的javascript。我在JavaScript控制台上得到了Reference Error: showdown is not defined。奇怪的是，仅仅运行bundle update就解决了这个问题。

第三，我遇到这段代码的turbolinks有一些问题，默认情况下它是由rails激活的。基本上来说，你需要确保你的脚本将在涡轮链接建立页面后加载。您可以通过在函数之前插入$(document).on('turbolinks:load', function()来确保这一点，在您的情况下是

$(document).on('turbolinks:load', function() {
    var converter = new showdown.Converter();
    $('#wiki_body').on('keyup', function() {
        var mdown = $(this).val();
     $('#wiki_preview').html(converter.makeHtml(mdown));
    });
}

您可以在views/layouts/application.html.erb文件中检查涡轮链接是否已激活，如果涡轮链接已激活，则会有一行显示<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>

相关文章：