无法分离 Backbone 和 Rails 路由答案

【问题标题】：Can't separate Backbone and Rails routes无法分离 Backbone 和 Rails 路由
【发布时间】：2015-06-10 10:47:21
【问题描述】：

我是 Backbone 的新手，因此作为学习练习，我正在尝试使用 Rails 后端设置一个简单的应用程序。我正在努力将 Rails api 路由和 Backbone 路由分开。例如，我的 Backbone 路由器目前看起来像这样：

class App.Routers.LawAppRouter extends Backbone.Router
  routes:
    '': 'index'
    'flows/:id': 'showFlow'

index: ->
  flows = new App.Collections.Flows()
  flows.fetch().done =>
    view = new App.Views.Flows(collection: flows)
    $('#container').html(view.render().el)    

showFlow: (id) ->
  alert('in showFlow)

我想做的是让 Rails API 在“api/v1/resource”命名空间下运行，而 Backbone 将处理简单的“/resource”路由，然后在处理函数中调用 API。

最初我创建了一个 Flow 模型

class App.Models.Flow extends Backbone.Model

一个集合

class App.Collections.Flows extends Backbone.Collection
  url: 'api/v1/flows'
  model: App.Models.Flow

和一个索引视图

<ul>
  <% for flow in @flows.models: %>
    <li>
      <a href="<%= flow.url() %>"><%= flow.get('title') %></a>
    </li>
  <% end %>
</ul>

这样写，flow.url()返回

api/v1/flows/:id

直接命中 API。相反，我希望 flow.url() 生成客户端路由

flows/:id

所以我把模型改成了

class App.Models.Flow extends Backbone.Model
  clientSideUrl: ->
    "flows/#{@id}"

和索引视图到

<a href="<%= flow.clientSideUrl() %>"><%= flow.get('title') %></a>

现在生成

flows/:id

据我了解，应该与这条主干路由匹配

'flows/:id': 'showFlow'

但是，相反，它一直在访问 /flows/:id 处的 API，这会引发错误，因为 Rails 中不存在该路由。

我在这里缺少什么？
为什么没有触发主干路由？
这是在 Backbone 中分离客户端和服务器端路由的正确方法吗？

谢谢！

【问题讨论】：

标签： ruby-on-rails api backbone.js routing

【解决方案1】：

如果你没有使用 pushState，那么 href 属性中的 url 应该是：

<a href="<%= #/flow.clientSideUrl() %>"><%= flow.get('title') %></a>

由于 # 丢失它直接尝试导航到 url 而不是实例化路由器。

如果您使用的是 html pushState，那么您需要遵循以下内容： https://stackoverflow.com/a/9331734/741108

如果您希望您的模型/集合和路由器 url 看起来相似，那么您可以使用 $.ajaxPrefilter

// root = 'http://your.domain.com/api/v1' 
$.ajaxPrefilter(function(options,orginalOptions,jqXHR){
    options.url = root + options.url;    
});

现在，每个 ajax 调用都会在实际调用之前通过预过滤器。

因此，models(urlRoot) 和 collections(url) 可以在其定义中包含相对 url，这看起来类似于 Routes url，并且在进行服务器调用时，完整的 url 被框在预过滤器中。

【讨论】：