涡轮动态组件

Question

我想通过涡轮使组件动态化，这样当有人关注另一个人时，它就会增加到他的关注者组件，问题是这个组件正在工作，但我必须重新加载页面才能看到结果（用户关注度的增量）

<p>Followers: 
<strong>
    <%= turbo_frame_tag "followers_count_#{user.id}" do %>
    <%= @user.followers.count %>
    <% end %>
</strong>
</p>
<p>Following: 
<strong>
    <%= turbo_frame_tag "following_count_#{current_user.id}" do %>
    <%= @user.following.count %>
    <% end %>
</strong>
</p>

Answer 1

如果您想动态更改用户当前看到的页面，有多种选择。

Turbo 8 变形

当您使用 Turbo 时，如果它是 Turbo 8，您可以从其变形功能中受益。 不错的文章可以阅读here（我建议阅读有关该功能的信息，以便可以理解正在发生的事情），但基本上你可以做类似的事情（假设我们正在使用

UserController#show

）：

• 在您的视图中，您添加

  <%= turbo_stream_from @user %>

  • 这使得页面“订阅”@user 对象的更改
• 在您的关注者模型中，您有

  has_one :following

  并添加

  touch: true

  • 这使得当添加新关注者时

    user.updated_at

    发生变化
  • 也许你使用其他模型/结构来实现这个，所以你必须找到一种方法来达到相同的效果 - 当添加新的关注者时改变

    user.updated_at

    。

如果你有 ActionCable (Websockets) 工作，这应该是全部，你可以看到内容变化。

从控制器显式广播

如果您有网络套接字，但不想打开变形，您可以简单地从您的

broadcast

（或类似）中

FollowerController#create

。

投票更改 - 刷新涡轮框架

您可以使用

turbo-frame src: user_followers_count_path(user_id:)

远程填充涡轮框架，然后您可以使用一些js强制此涡轮框架定期“刷新”（例如here，您基本上只需删除

src

并添加再次加载，涡轮框架将重新加载）。
如果你不想为变形、websockets 等烦恼（这些都会变得复杂），我会推荐这种方式。