Question

在我的rails应用程序中，我有一些带有图像的视图。

<div class="item-images">
  <div class="row">

    <% @user_item.user_item_images.each_with_index do |image, index| %>
      <% if (index + 1) % 5 == 0 %>
        </div><div class="row">
      <% end %>
      <div class="image-container">
        <a class="fancybox" rel="group" href="<%= image.picture.large.url %>"><img class="img-thumbnail img-circle" src="<%= image.picture.thumb.url %>" alt="" /></a>

        <% if @user.eql?(current_user) && @user_item.primary_image_id != image.id %>
          <button class="btn btn-xs btn-danger delete-image" data-id="<%= image.id %>" data-toggle="modal" data-target="#delete-image-modal">
            <i class="fa fa-trash-o fa-lg"></i>
          </button>
          <% if @user_item.primary_image_id != image.id %>
            <button class="btn btn-xs btn-info make-primary" data-id="<%= image.id %>" data-toggle="modal" data-target="#make-primary-modal">
              <i class="fa fa-thumb-tack fa-lg"></i>
            </button>
          <% end %>
        <% end %>


      </div>
    <% end %>

如您所见，我有两个与每个图像相关联的按钮。相应的模态：

<!-- Delete Image Modal -->
<div id="delete-image-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="delete-image" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="delete-image">Are you sure you want to delete this image?</h4>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <%= link_to 'Delete', '', method: :delete, :class => 'btn btn-danger' %>
      </div>
    </div>
  </div>
</div>

<!-- Make Primary Modal -->
<div id="make-primary-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="make-primary" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="make-primary">Are you sure you want to make this the primary image for your item?</h4>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <%= link_to 'Make Primary', make_primary_path(????), :class => 'btn btn-info' %>
      </div>
    </div>
  </div>
</div>

make_primary_path将我们带到一个控制器动作，该动作改变了模态相关图像的属性：

  def make_primary
    @user_item = UserItemImage.find(params[:user_item_image_id]).user_item
    @user_item.update_attributes(primary_image_id: params[:id])
    flash[:notice] = "primary image set"
    redirect_to :back
  end

此行动的路线：

get 'user_item_images/:user_item_image_id/make_primary', to: 'user_item_images#make_primary', as: :make_primary

我的问题是在＆＃34;制作主要模式＆＃34;中生成链接。如何从按钮中获取data-id并在link_to帮助器中使用它？

Answer 1

一种选择是使用ajax并将其绑定到该链接的click事件。类似的东西：

$('.btn-info').on('click', function(e){
  e.preventDefault()
  var imageId = $('make-primary').data('id');
  $.ajax({
    type: 'GET', // either
    url: '/user_items/make_primary',
    data: {
      image_id: imageId
    }
  }).done(function(ajax_success){
     // use jquery to update whatever you need to on the page
     // close modal
  })
})

Answer 2

您还可以使用以下导轨： rm: cannot remove ‘Binary’: No such file or directory rm: cannot remove ‘file’: No such file or directory rm: cannot remove ‘matches’: No such file or directory

Answer 3

我最终这样做了：

  $('.make-primary').on('click', function() {
    $('#make-primary-modal').find('a').attr('href', '/user_item_images/' + $(this).data('id') + '/make_primary');
  });

并更改link_to帮助程序：

<%= link_to 'Make Primary', '', method: :post, :class => 'btn btn-info' %>

如何将数据属性从按钮传递到它的相应模态

3 个答案: