Rails Appにショーダウンが表示されない

Question

私は初めてshowdown-rails gemを使用していますが、表示に問題があります。私はapplication.jsファイルに//= require showdownというファイルを含め、GitHubページの指示に従って宝石のインストールを行った。

<%= 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は表示されませんレンダリングする必要があります：私は、次のコードを使用して、私のwikis#edit/wikis#newページ上の一部の_formでそれを使用しています。これは私の初めての宝石の使い方なので、どこが間違っているのか分かりません。誰も私のエラーをここで指摘できますか？

Answer 1

質問は少し古くなっていますが、同じ問題がありました。まだ回答がないので、結果を共有すると思っていました。

まず、ビューにJavaScriptを直接書き込まないことをお勧めしますが、assets/javascriptサブディレクトリの対応するファイル（assets/javascripts/wiki.js）を使用することをおすすめします。

第2に、インストールされたバージョンでインポートされたjavascriptを正しく読み込めないレールが発行されました。私はJavaScriptコンソールにReference Error: showdown is not definedを持っています。奇妙なことに、ただ実行してbundle updateこの問題を修正しました。

第3に、このコードには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)); 
    }); 
} 

turbolinksがあなたのviews/layouts/application.html.erbファイルで有効化されている場合は、turbolinksがアクティブになっている場合は、<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>

を言っラインを持っています、確認することができます