0

マークダウンをレンダリングするためにRedcarpet gem を使用しています。

これは私のposts_helper.rbファイルです：

module PostsHelper
    def markdown
        options = [:autolink => true, :space_after_headers => true, :hard_wrap => true, :prettify => true]
        Redcarpet::Markdown.new(Redcarpet::Render::HTML, *options)
    end
end

ビューファイルで動作しますindex.html.erb。

<% @posts.each do |post| %>
    <tr>
        <td><%= post.title %></td>
        <td><%= markdown.render(post.summary).html_safe %></td>
        <td><%= link_to 'Show', post %></td>
        <td><%= link_to 'Edit', edit_post_path(post) %></td>
        <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
    </tr>
<% end %>

しかし、Angular.js を使用した後、動作しません。Redcarpet は angular.js からのデータを解析できません。この問題をどのように解決すればよいですか。

# app/assets/javascripts/app.js.coffee
window.App = angular.module('AngularPosts', ['ngResource'])

# app/assets/javascripts/angular/controller/posts_ctrl.js.coffee
App.controller 'PostsCtrl', ['$scope', 'Post', ($scope, Post) ->
  $scope.posts = Post.query()
]

# app/assets/javascripts/angular/services/posts.js.coffee
App.factory 'Post', ['$resource', ($resource) ->
  $resource '/posts/:id', id: '@id'
]

# app/views/home/index.html.erb
<div ng-controller="PostsCtrl">
    <ul>
        <li ng-repeat="post in posts">
            <h3><%= '{{post.title}}' %></h3>
            <div><%= markdown.render("{{post.summary}}").html_safe %></div>
        </li>
    </ul>
</div>

データを正しくレンダリングするにはどうすればよいですか?

私がこのように得たもの：

ここに画像の説明を入力

ブラウザで:

ここに画像の説明を入力

4

1 に答える 1

0

post.summaryJSON ペイロードの一部として事前レンダリングされたものを送信する必要があります。または、 Showdown.jsなどの JavaScript の代替手段を使用して、クライアント側でマークダウンをレンダリングすることもできます。

これらの行は、ビューがレンダリングされるときに一度だけレンダリングされます。

<h3><%= '{{post.title}}' %></h3>
<div><%= markdown.render("{{post.summary}}").html_safe %></div>

あなたに与える：

<h3>{{post.title}}</h3>
<div><p>{{post.summary}}</p></div>

その時点で、Angular が引き継ぎます。この時点でこれ以上の Ruby はありません。

于 2013-06-18T06:00:10.987 に答える