Question

我正在我的应用程序中创建一个管理面板，我希望能够在不刷新页面的情况下添加/删除/编辑项目。我想到的第一件事是AJAX。所以我实现了它，它运行得很好。

我必须做的是在删除项目后手动删除正确的div，在创建项目后添加div等。

过了一段时间，我读到了ReactJS（之前听过，但从未使用它），以及它可以做的事情 - 尤其是获取数据库并更新视图（但只有更改的内容）。我的问题是 - 我需要这个吗？

在这种情况下使用像反应这样的库有什么好处？

PS我真的很难理解所有可用的东西，我可以随时使用，因为我不久前开始使用RoR。有什么提示吗？

Answer 1

根据我的经验，React可以正常使用Rails，它可以让您对前端解决方案进行组件化，请记住，您还需要学习Flux，如果您决定通过这条路径，我建议开始集成React-Flux使用this 3 ways之一使用rails来执行此操作。

无论如何我认为对于你的问题，最好和更便宜的解决方案（在学习曲线方面）应该使用turbolinks。查看此video，它将为您提供有关turbolinks优势的清晰概念。

您所描述的解决方案可以使用以下步骤进行构建：

为您的资源创建一个控制器（在我的情况下是项目）：

class ProjectsController < ApplicationController
  before_filter :set_projects, only: :index

  def index
    @project = Project.new
  end

  private

  def set_projects
    @projects = Projects.all
  end
end

将项目列表移动到部分：

%table
  %thead
    %tr
      %th Name
  %tbody
    - projects.each do |project|
      %tr
        %td= project.name

将创建表单移动到另一个部分并将其设置为远程：

= form_for project, remote: true do |form|
  = form.text_field :name
  = form.submit :save

在索引视图中渲染部分：

.new-project-container
  = render 'path_to_my_new_project', project: @project
.project-list-container
  = render 'path_to_my_listed_projects_partial', projects: @projects

向控制器添加创建端点

class ProjectsController < ApplicationController
  before_filter :set_projects, only: :index

  def index
    @project = Project.new
  end

  def create
    format.js do
      Project.create(project_params)
      set_projects
    end
  end

  private

  def set_projects
    @projects = Projects.all
  end

  def project_params
    params.require(:project).permit(:name)
  end
end

在/app/views/projects/create.js.erb

上创建一个视图

$('.new-project-container').html("<%= j render 'path_to_my_listed_projects_partial', project: Project.new%>")
$('.project-list-container').html("<%= j render 'path_to_my_listed_projects_partial', projects: @projects%>")

这会将您创建的项目自动添加到列表中，以便删除功能，您可以使用相同的方式进行思考。

将远程true添加到destroy链接：

%table
  %thead
    %tr
      %th Name
      %th
  %tbody
    - projects.each do |project|
      %tr
        %td= project.name
        %td= link_to :delete, project, method: :delete, remote: true

创建一个响应JS格式的端点：

  def destroy
    format.js do
      project = Project.find(params[:id])
      project.destroy
      set_projects
    end
  end

还有destroy.js.erb

$('.project-list-container').html("<%= j render 'path_to_my_listed_projects_partial', projects: @projects%>")

我认为这种方式比你更清洁。

使用ReactJS的Rails。有什么好处？

1 个答案: