2016-06-28 61 views
0

我第一次使用showdown-rails gem,并且在出现时遇到了一些麻烦。我按照GitHub页面的指示运行了gem的安装,其中包括我的application.js文件,其中包含//= require showdown。我使用下面的代码使用它在一个_form部分我wikis#edit/wikis#new页:摊牌未出现在Rails应用程序中

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

回答

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)); 
    }); 
} 

您可以检查是否turbolinks在您views/layouts/application.html.erb文件中被激活,如果turbolinks被激活,你就会有一个行说<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'%>

相关问题