将 ruby​​ 代码放入 html 字符串？辛纳特拉，鲁比

Question

我正在使用 Sinatra。 我有一个套牌：在 main.rb 中

session[:deck] = []
suit  = ['Clubs', 'Spades', 'Hearts', 'Diamonds']
values = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'Jack', 'Queen','King', 'Ace']
session[:deck] = suit.product(values).shuffle!

在我的 game.erb 中，我想显示与这些数组中的每一个关联的图像。我的公共/图像/卡片中有所有图像。在 game.erb 中，我可以让任何卡片静态显示，如下所示：

Here are your cards: <img src="/images/cards/clubs_10.jpg" height="120" width="120">

有没有办法可以做类似的事情：

<img src='/images/cards/session[:deck].first_session[:deck].last.jpg' height="120" width="120>

我想做一个辅助方法，但我似乎无法开始。

Answer 1

需要在控制器而不是视图中定义将哪个卡片图像应用于特定卡片。我会以不同的方式组织事物：

SUITS  = %w[Clubs Spades Hearts Diamonds]
VALUES = %w[2 3 4 5 6 7 8 9 10 Jack Queen King Ace]
CARDS = SUITS.product(VALUES) 
IMAGES = Hash[ CARDS.map{ |suit, value| [[suit, value], File.join('/images/cards', suit, "#{ value }.jpg") ] } ] 
session = {deck:[]}
session[:deck] = CARDS.shuffle

这是此时定义的内容：

CARDS
# => [["Clubs", "2"], ["Clubs", "3"], ["Clubs", "4"], ["Clubs", "5"], ["Clubs", "6"], ["Clubs", "7"], ["Clubs", "8"], ["Clubs", "9"], ["Clubs", "10"], ["Clubs", "Jack"], ["Clubs", "Queen"], ["Clubs", "King"], ["Clubs", "Ace"], ["Spades", "2"], ["Spades", "3"], ["Spades", "4"], ["Spades", "5"], ["Spades", "6"], ["Spades", "7"], ["Spades", "8"], ["Spades", "9"], ["Spades", "10"], ["Spades", "Jack"], ["Spades", "Queen"], ["Spades", "King"], ["Spades", "Ace"], ["Hearts", "2"], ["Hearts", "3"]...

IMAGES
# => {["Clubs", "2"]=>"/images/cards/Clubs/2.jpg", ["Clubs", "3"]=>"/images/cards/Clubs/3.jpg", ["Clubs", "4"]=>"/images/cards/Clubs/4.jpg", ["Clubs", "5"]=>"/images/cards/Clubs/5.jpg", ["Clubs", "6"]=>"/images/cards/Clubs/6.jpg", ["Clubs", "7"]=>"/images/cards/Clubs/7.jpg", ["Clubs", "8"]=>"/images/cards/Clubs/8.jpg", ["Clubs", "9"]=>"/images/cards/Clubs/9.jpg", ["Clubs", "10"]=>"/images/cards/Clubs/10.jpg", ["Clubs", "Jack"]=>"/images/cards/Clubs/Jack.jpg", ["Clubs", "Queen"]=>"/images/...

session
# => {:deck=>[["Hearts", "10"], ["Hearts", "King"], ["Hearts", "2"], ["Hearts", "Jack"], ["Spades", "5"], ["Spades", "Queen"], ["Clubs", "Jack"], ["Spades", "King"], ["Spades", "Ace"], ["Hearts", "5"], ["Hearts", "Queen"], ["Clubs", "9"], ["Clubs", "3"], ["Diamonds", "3"], ["Clubs", "4"], ["Diamonds", "King"], ["Clubs", "8"], ["Hearts", "4"], ["Spades", "2"], ["Clubs", "5"], ["Clubs", "7"], ["Diamonds", "8"], ["Clubs", "2"], ["Hearts", "Ace"], ["Clubs", "King"], ["Spades", "10"], ["Diamon...

在您看来，通过在 IMAGES 哈希中查找卡片，您可以轻松确定要为特定卡片显示哪个图像：

session[:deck].each do |card|
  puts IMAGES[card]
end

# >> /images/cards/Hearts/10.jpg
# >> /images/cards/Hearts/King.jpg
# >> /images/cards/Hearts/2.jpg
# >> /images/cards/Hearts/Jack.jpg
# >> /images/cards/Spades/5.jpg
# >> /images/cards/Spades/Queen.jpg
# >> /images/cards/Clubs/Jack.jpg
# >> /images/cards/Spades/King.jpg
# >> /images/cards/Spades/Ace.jpg
# >> /images/cards/Hearts/5.jpg
# >> /images/cards/Hearts/Queen.jpg
# >> /images/cards/Clubs/9.jpg
# >> /images/cards/Clubs/3.jpg
# >> /images/cards/Diamonds/3.jpg
# >> /images/cards/Clubs/4.jpg
# >> /images/cards/Diamonds/King.jpg
# >> /images/cards/Clubs/8.jpg
# >> /images/cards/Hearts/4.jpg
# >> /images/cards/Spades/2.jpg
# >> /images/cards/Clubs/5.jpg
# >> /images/cards/Clubs/7.jpg
# >> /images/cards/Diamonds/8.jpg
# >> /images/cards/Clubs/2.jpg
# >> /images/cards/Hearts/Ace.jpg
# >> /images/cards/Clubs/King.jpg
# >> /images/cards/Spades/10.jpg
# >> /images/cards/Diamonds/4.jpg
# >> /images/cards/Spades/9.jpg
# >> /images/cards/Spades/7.jpg
# >> /images/cards/Spades/8.jpg
# >> /images/cards/Clubs/10.jpg
# >> /images/cards/Hearts/8.jpg
# >> /images/cards/Diamonds/Jack.jpg
# >> /images/cards/Diamonds/6.jpg
# >> /images/cards/Hearts/7.jpg
# >> /images/cards/Hearts/9.jpg
# >> /images/cards/Hearts/6.jpg
# >> /images/cards/Diamonds/Ace.jpg
# >> /images/cards/Hearts/3.jpg
# >> /images/cards/Diamonds/Queen.jpg
# >> /images/cards/Diamonds/10.jpg
# >> /images/cards/Spades/4.jpg
# >> /images/cards/Spades/6.jpg
# >> /images/cards/Clubs/Queen.jpg
# >> /images/cards/Diamonds/7.jpg
# >> /images/cards/Diamonds/5.jpg
# >> /images/cards/Spades/3.jpg
# >> /images/cards/Diamonds/9.jpg
# >> /images/cards/Spades/Jack.jpg
# >> /images/cards/Diamonds/2.jpg
# >> /images/cards/Clubs/6.jpg
# >> /images/cards/Clubs/Ace.jpg

Ruby Hashes 可以有一个数组作为键，这样可以很容易地找到与特定卡片匹配的图像。

Answer 2

你可以在你的助手中创建一个方法：

def display_image(card)

"<img src='/images/cards/#{card[0]}_#{card[1]}.jpg' height='100' width='100'>"
end

然后你会这样调用你的方法：

<%= display_image(card) %>

Answer 3

<img src='/images/cards/<%= "#{session[:deck].first}_#{session[:deck].last} %>.jpg' height="120" width="120>

但也许这样做更好：

<%= image_tag "cards/#{session[:deck].first}_#{session[:deck].last}.jpg", size: '120' %>