ruby-on-rails - 使用 React.js 作为前端时如何处理 Rails 中的数据绑定(bind)？

Question

我有兴趣构建一个同构应用程序，该应用程序将使用 React.js 作为前端，并使用 Rails 来处理其他所有内容。

我确信我会使用大量的 AJAX，但对于主要表单提交和页面更改，我想通过 Rails 路由器。我不想使用 Javascript 来控制我在客户端上显示的 View 。

我唯一的问题是，在 React 中设置输入的最佳方法是什么，以便它们与 Rails 中的模型干净地绑定(bind)？

在常规 erb 中，您将为给定模型创建一个表单对象，然后使用该对象上的输入方法来创建已设置的 HTML 输入，以便在提交时，数据绑定(bind)几乎是自动的。

我能想到的用 React 之类的东西来做到这一点的唯一方法是在我的输入上手动设置 name 属性，以便它们正确绑定(bind)。我想这并不可怕，我只是想知道是否有人有更好的解决方案。

Answer 1

创建一个客户端(React 模型)来“反射(reflect)”Rails 响应。例如在 rails 一侧:

class Message < ActiveRecord::Base
  belongs_to :thread

  validate :text, presence: true
end

服务器索引/新端点发送的 JSON 响应应定义客户端的数据模型结构。例如，索引端点可能返回:

{
  "messages": [
    {
      "id": "1",
      "text": "Hello Stack",
      "threadId": "5"
    } 
  ]
}

客户端模型:

var Message = function Model(){
  this.id = null;
  this.text = null;
  this.threadId = null;
};

Message.fromJSON = function(messageJSON) {
  var message = new Message();
  message.id = messageJSON.id;
  // ...
  return message;
};

module.exports = Message;

然后在创建/编辑时，只需调用 JSON.stringfy(msg)。