javascript - 通过下拉菜单和 Ajax 更改用户的角色

Question

我有一个站点，其中 User 模型具有 role_id 属性。 Roles表中目前有3个 Angular 色:

ID    NAME
1     user
2     manager
3     admin

在站点的管理部分，有一个包含用户列表的表格。我想要做的是为每个用户提供一个下拉菜单，用户的 Angular 色可以通过 ajax 请求更改。此下拉列表还需要根据可用 Angular 色动态填充其可能的值。例如，如果稍后添加了 foobar Angular 色，下拉菜单应该反射(reflect)出来。

后端部分似乎足够直接:在 UsersController 中编写一个 change_role 方法(使用 before_action: is_admin)并拥有它在 respond_to block 中处理 ajax 请求。我只是想弄清楚如何使用 Rails 助手和 Unobtrusive JS(远程:true)以一种干净的方式构建前端。这可能吗？

Answer 1

这是一个简单的例子。警告:这不包括错误处理，我建议您根据您的应用程序自行构建。它还假定您知道如何连接路由等。您可能希望在 JS 中动态获取 users_path。查看 gon gem 了解更多相关信息。

app/assets/javascripts/users.coffee

$(".role-select").on "change", ->
  user_id = $(this).data("user-id")
  role_id = $(this).val()

  $.post "/users/#{user_id}/update_role", 
         role_id: role_id

查看

<select class='role-select' data-user-id={user.id}>
  [...]
</select>

Controller

def update_role
  respond_to do |format|
    format.js do 
      @user = User.find(params[:id])
      @user.update(role_id: params[:role_id])
      # manage return status here
      head :ok
    end
  end
end