带有远程 Rails 服务器的 BackBone 客户端

Question

背景：

我使用“rails gscaffold hotel name Stars:integer”来快速启动（并向数据库中插入一些记录）， 并在 Rails 应用程序之外编写一个 Backbone 客户端。

我使用 Safari file:///Users/lg/Workspace/www/index.html 在本地打开 Backbone 客户端来测试客户端，因为我的想法是将 Rails 服务器放在主机（例如 Heroku）上并插入 Backbone 客户端进入 PhoneGap 应用程序。

我的骨干客户端只有几行：

Hotel = Backbone.Model.extend({
  initialize: function(){
    console.log("initialize Hotel")
  }

});

Hotels = Backbone.Collection.extend({
  model: Hotel,
  url: 'http://0.0.0.0:3000/hotels'
});

但是当我获取具有骨干的酒店时，rails 使用 format.html 进行响应，而不是 Backbone 可以解析的 format.json 。

hotels_controller.rb

# GET /hotels
# GET /hotels.json
def index
  @hotels = Hotel.all

  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @hotels }
  end
end

Safari 检查器控制台：

hotels = new Hotels()
Object
hotels.fetch()
Object
hotels.length
0

Request URL:http://0.0.0.0:3000/hotels
Request method:GET
Status code:200 OK

Request Headers
Accept:application/json, text/javascript, */*; q=0.01
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10

Response Headers
Cache-Control:max-age=0, private, must-revalidate
Connection:Keep-Alive
Content-Length:2233
Content-Type:text/html; charset=utf-8
Date:Sat, 11 Feb 2012 14:31:52 GMT
Etag:"606da2b7c21ca96c9d71aabccdd439e9"
Server:WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)

编辑： 将 url 设置为 url 进行更新：“http://0.0.0.0:3000/hotels.json

它可以 fatch 但不能使其他人 CRUD （示例 PUT）

hotels = new Hotels()
Object

hotels.fetch()
Object

hotels.length
5

hotel = hotels.get(2)
Object

hotel.set({name: "name 2"})
Object

hotel.save()
Object

PUT http://0.0.0.0:3000/hotels.json/2 404 (Not Found)

相反，如果我仅设置 /hotels 它可以工作（但骨干客户端必须驻留在服务器上）

编辑2：

将代码上传到github

https://github.com/RevH/backbonefails

编辑 3：

另一个细节是，如果您将backboneclient目录插入Rails public目录并将 0.0.0.0:3000/hotels.json 更改为 /hotels ，效果非常好！但是如果我将客户端与服务器分开并使用 Safari 打开它，则在 url 末尾需要 .json 。

我在 github 上打开了一个 Rails 问题 https://github.com/rails/rails/issues/5005

Answer 1

需要理解的重要一点是，Rails 中的最佳实践不是使用 Accept 标头。 这里有一篇很好的文章，详细解释了原因。摘要：HTTP Accept 标头的浏览器实现已损坏。 Rails 最佳实践是在请求中设置 :format 参数。但是，如果您喜欢接受标头，它们是受支持的，但有关 Rails 中有效接受标头的规则可能很棘手。如果您的接受标头与以下正则表达式匹配：

BROWSER_LIKE_ACCEPTS = /,\s*\*\/\*|\*\/\*\s*,/

则rails会将其丢弃并默认为text/html mime类型。我知道，对吧？你的标题恰好与此匹配。大多数人没有这个问题的原因是rails“修复”了rails jquery-ujs.他们在 JQuery 中设置了 ajaxSetup beforeSend 回调，将 */* 放在标头的开头，这就是 magic Rails 正则表达式想要看到的内容，尽管我无法真正说出原因，除了它们知道未经修改的浏览器请求总是会将其放在那里。以下是修复 JQuery 中接受标头的方法。

$(function() {
  $.ajaxSetup({
    'beforeSend': function(xhr) {
    xhr.setRequestHeader("accept", "application/json");
    }
  });
});

Answer 2

您已设置 Rails 代码，以便需要调用 /hotels.json 才能返回 json，但您的骨干代码仅调用 /hotels 。

解决此问题的最简单方法是为 json 数据（而不是 html 页面）提供单独的 api。例如：/hotels 返回 html，/api/hotels 返回 json。有关示例，请参阅 Ryan Bate 的 Railscasts（付费）http://railscasts .com/episodes/323-backbone-on-rails-part-1

另一种选择是更改您的 Backbone 模型/集合，以便将“.json”附加到你的网址结尾。例如：

Backbone.Model.extend({
  url: function(){
    var url;
    if (this.isNew()){
      url = "/hotels/" + this.id + ".json";
    } else {
      url = "/hotels.json";
    }
    return url;
  }
});

可能还有其他选择。这只是我突然想到的两个。

Answer 3

当你的 JavaScript 应用程序运行在与你的服务器不同的域、端口或协议上时，就会发生奇怪的事情。这称为同源策略。只需从 Rails 服务器加载 JavaScript，一切都会好起来的。