Question

我正在创建一个简单的应用程序，我正在尝试添加动态生成的模式，如下所示：

  <% @friends.each do |friend| %>
    <div class = "row user">
      <div class = "col-sm-4" >
        <img class="friend-picture" src=" <%= friend["image"][2]["content"] %>   ">
      </div>
      <div class = "col-sm-4">
        <h4 class="user-name text-center"><%= friend["name"] %> </h4>
        <ul class="list-group">
          <% @lastfm.getFriendTracks(friend["name"]).each do |track| %>
            <li class="list-group-item"> <%= track["artist"]["content"] %> - <%= track["name"] %>
                <br>
                <div class="text-right comments">
                    <a type="button" data-toggle="modal" data-target="#comments_<%=track["artist"]["content"]%>_<%=track["name"]%>">3 comments</a>
                </div>

                <div id="comments_<%=track["artist"]["content"]%>_<%=track["name"]%>" class = "modal fade" role = "dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title">
                                <%= track["artist"]["content"] %> - <%= track["name"] %>
                            </h4>
                          </div>
                          <div class="modal-body text-center container" style="max-width:570px">
                            <ul class = "list-group" >
                                <li class = "list-group-item text-left">
                                    <div class = "author">
                                        <p> Author </p> 
                                    </div>
                                    <div class = "comment">
                                        <p> Comment comment comment comment comment comment comment comment comment comment comment comment comment comment comment comment </p>
                                    </div>
                                </li>

                                <li class = "list-group-item text-left">
                                    <div class = "author">
                                        <p> Author </p> 
                                    </div>
                                    <div class = "comment">
                                        <p> Comment comment comment comment comment comment comment comment comment comment comment comment comment comment comment comment </p>
                                    </div>
                                </li>

                                <li class = "list-group-item text-left">
                                    <div class = "author">
                                        <p> Author </p> 
                                    </div>
                                    <div class = "comment">
                                        <p> Comment comment comment comment comment comment comment comment comment comment comment comment comment comment comment comment </p>
                                    </div>
                                </li>
                            </ul>

                            <textarea name="comment" cols="74" rows="3"></textarea>
                            <div class = "text-right">
                                <button type="button" class="btn btn-default" >Submit</button>
                            </div>


                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close
                            </button>
                          </div>
                        </div>
                    </div>
                </div>
            </li>
          <% end %>
        </ul>
      </div>
    </div>
  <% end %>

正如你所看到的，每个朋友都有一些歌曲，每首歌都有评论。我试图通过动态生成的id来调用弹出窗口，但是 - 有趣的是 - 只有第一个有效...当我点击第一首歌曲上的评论按钮（或者它后来出现）时它可以工作，但其余的都没有“T

在检查器中，我可以看到所有模态的ID都是正确生成的。

我已经没有想法该怎么做了。

Answer 1

创建元素ID时使用<%= track["artist"]["content"].parameterize %>和<%= track["name"].parameterize %>。这将使你的从#comments_Blues Pills_Lady In Gold到comments_blues-pills_lady-in-gold的文字。

显示模态的链接看起来像

<%= link_to '3 comments', '#', data: { toggle: 'modal', target: "#comments_#{track["artist"]["content"].parameterize}_#{track["name"].parameterize} %>

不相关，您应该使用content_tag标记div。在我看来，它更容易阅读。

<div id="comments_<%=track["artist"]["content"]%>_<%=track["name"]%>" class = "modal fade" role = "dialog">
  ...
</div>

看起来像

<%= content_tag :div, id: "comments_#{track["artist"]["content"].parameterize}_#{track["name"].parameterize}", class: 'modal fade', role: 'dialog' do %>
  ...
<% end %>

同样适用于您的图片

<img class="friend-picture" src=" <%= friend["image"][2]["content"] %>   ">

将是

<%= content_tag :img, nil, class: 'friend-picture', src: "#{friend["image"][2]["content"]} %>

注意nil传递，因为这将是一个空元素而不是一个块。

请记住，您还会产生很多潜在的开销。除非您知道用户将在页面上点击他们朋友的每个曲目，否则您实际上是在浪费带宽和渲染时间。一旦用户拥有很多朋友和很多曲目，页面加载可能会相当大（即使使用了缓存）。更好的选择是在用户点击时动态生成服务器端的模态。我录制了一个涵盖此类主题的截屏视频。 https://www.driftingruby.com/episodes/not-rjs-and-turbolinks-part-2

Rails应用程序中的动态引导模式不起作用

1 个答案: