Question

在我的Rails 5.2应用程序中，我具有以下link_to助手：

      <%= link_to game_stickers_path(game_id: game.id, sticker_id: sticker.id, placement_side: "right"), method: :post, remote: true do %>
        <span class='sticker-imagery'>
          <%= image_tag(sticker.image_path, class: 'sticker') %>
          <i class="fal <%= sticker.fa_class %> sticker-passive"></i>
        </span>
      <% end %>

单击链接时，Rails发送并发送HTML GET请求，而不是指定的JS POST请求。如果我保持完全相同的代码，但是将link_to更改为button_to helper，如下所示：

      <%= button_to game_stickers_path(game_id: game.id, sticker_id: sticker.id, placement_side: "right"), method: :post, remote: true do %>
        <span class='sticker-imagery'>
          <%= image_tag(sticker.image_path, class: 'sticker') %>
          <i class="fal <%= sticker.fa_class %> sticker-passive"></i>
        </span>
      <% end %>

单击链接时，Rails将预期的JS POST请求发送到控制器。

这似乎不仅发生在此特定链接中，而且还发生在我应用程序中的所有link_to帮助器中。

我已经阅读了一个潜在的解决方案，其中涉及在资产管道中包含jquery-ujs，因为Rails 5.2无需jQuery就可以工作。我确实正在运行jQuery，但尝试添加jquery-ujs却没有成功。无论如何，这似乎是一个奇怪的解决方案，因为此版本的Rails可以在没有jQuery-ujs的情况下运行，并且人们希望remote: true开箱即用。

我想知道为什么会发生这种情况，以及您是否可以提供有关如何使我的link_to助手与预期的遥控器一起使用的任何想法。

[更多详细信息]

这是两个助手的渲染HTML：

链接到：

<a data-remote="true" rel="nofollow" data-method="post" href="/game_stickers?game_id=492&amp;placement_side=right&amp;sticker_id=11">
            <span class="sticker-imagery">
              <img class="sticker" src="/assets/stickers/boot-3c57715e24e50da0f4bb2cb14229416f53499173efee2f6a0bdb230d2e1cd47f.svg" style="display: none;">
              <svg class="svg-inline--fa fa-boot fa-w-16 sticker-passive" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="boot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="display: block;"><path fill="currentColor" d="M415 247.8L352 232V128c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H32C14.3 0 0 14.3 0 32v434.7c0 8.5 3.4 16.6 9.4 22.6l13.3 13.3c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4L128 480l22.6 22.6c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4L256 480l22.6 22.6c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4L384 480l22.6 22.6c6 6 14.1 9.4 22.6 9.4h37.5c8.5 0 16.6-3.4 22.6-9.4l13.3-13.3c6-6 9.4-14.1 9.4-22.6v-94.8c0-58.7-40-109.9-97-124.1zM32 32h320v64H32V32zm448 434.7L466.7 480h-37.5l-22.6-22.6c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4L338.7 480h-37.5l-22.6-22.6c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4L210.7 480h-37.5l-22.6-22.6c-6-6-14.1-9.4-22.6-9.4s-16.6 3.4-22.6 9.4L82.7 480H45.3L32 466.7V416h448v50.7zm0-82.7H32V128h288v32h-88c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h88v32h-88c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h88l87.3 22.8c42.8 10.7 72.7 49 72.7 93.1V384z"></path></svg><!-- <i class="fal fa-boot sticker-passive"></i> -->
            </span>
</a>

button_to：

<form class="button_to" method="post" action="/game_stickers?game_id=492&amp;placement_side=right&amp;sticker_id=16" data-remote="true"><button type="submit">
            <span class="sticker-imagery">
              <img class="sticker" src="/assets/stickers/flame-9b64ac1b4a1175c7ad2af055e8c2f01c3f1b3361e01ede883cf35c78af103da4.svg">
              <svg class="svg-inline--fa fa-flame fa-w-12 sticker-passive" aria-hidden="true" focusable="false" data-prefix="fal" data-icon="flame" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M192 0C79.7 101.33 0 220.92 0 300.55 0 425.05 78.95 512 192 512s192-86.95 192-211.45C384 220.6 303.78 100.86 192 0zm0 480c-95.7 0-160-72.12-160-179.45 0-63.08 63.42-164.08 160-256.83 96.58 92.76 160 193.76 160 256.83C352 407.88 287.7 480 192 480zm60.1-267.1c-26.52-22.66-51.57-44.08-51.57-77.63 0-4.54-3.77-6.25-5.38-6.78-.96-.3-2.05-.49-3.2-.49-2.57 0-5.39.95-7.38 3.67C111.36 231.23 224 224 224 296c0 30.93-25.07 56-56 56s-56-25.07-56-56v-40c0-2.05-.78-4.1-2.34-5.66S106.05 248 104 248s-4.09.78-5.66 2.34C89.84 258.6 64 285.98 64 330.11c0 65 57.42 117.89 128 117.89s128-52.89 128-117.89c0-59.17-34.52-88.67-67.9-117.21zM192 416c-45.26 0-83.29-28.16-93.38-65.93C114.74 370.71 139.85 384 168 384c48.52 0 88-39.48 88-88 0-20.66-6.08-36.85-14.51-50.01 26.69 23.29 46.51 44.58 46.51 84.12 0 47.36-43.06 85.89-96 85.89z"></path></svg><!-- <i class="fal fa-flame sticker-passive"></i> -->
            </span>
</button><input type="hidden" name="authenticity_token" value="1BG92aLv0In0NNqArHzReIRkf8CvuiZnCMzzjMxhGTbYYKmIbNMr5znGuwK9Y1+XYy8N6goyGeXcQIo8FUJpoA==">
</form>

Answer 1

好像正在按预期生成html。您确实需要将rails ujs代码输入到application.js文件中，该文件会将正确的事件侦听器附加到元素。 jquery-ujs被库的纯js版本所取代，现在默认包含在rails中。

将此添加到application.js

ValueError: shape mismatch: objects cannot be broadcast to a single shape

我认为当前按钮实际上可能无法与remote：true一起正常使用。表单可以发送帖子，为此配置的表单是正确的，但是//= require rails-ujs标签不能在没有Rails uj的情况下发布

为什么Rails 5.2'remote：true'在link_to帮助器中不起作用，而在button_to中起作用？

1 个答案: