摊牌没有出现在Rails应用程序中

时间:2016-06-28 16:37:58

标签: javascript ruby-on-rails showdown

我第一次使用How To Terminate an Application "Cleanly" in Win32宝石,但是出现问题我遇到了一些麻烦。我按照GitHub页面上的说明运行了gem的安装,包括在我的application.js文件中//= require showdown。我使用以下代码在_form / wikis#edit页面的wikis#new部分中使用它:

<%= 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应该呈现永远不会出现。这是我第一次使用宝石,所以我不确定我哪里出错了。任何人都可以在这里指出我的错误吗?

1 个答案:

答案 0 :(得分:0)

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

首先,不要在您的视图中直接编写JavaScript,这是一种良好做法,但您应该使用assets/javascript子目录下的相应文件,即assets/javascripts/wiki.js

其次,我遇到使用rails无法使用已安装的版本正确加载导入的javascript。我的JavaScript控制台上有Reference Error: showdown is not defined。奇怪的是,只需运行bundle update即可修复此问题。

第三,我遇到此代码与turbolinks存在一些问题,默认情况下由rails激活。基本上,您需要确保在turbolinks设置页面后加载您的脚本。您可以通过在函数之前插入$(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文件中是否已激活turbolinks,如果激活了turbolinks,您将有一行<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>