3

我是backbone.js 的新手，所以这可能是一个简单的问题。

路由器似乎使用语义上合理的 url，但它们对用户不是很友好。

在我看到的示例中，他们使用：

local.com/post/id/1

但在 wordpress 中，我会选择将其重写为：

local.com/2012-11-03-backbone-js-router-question.html

这将通过一个大的重写表运行并转换为正确的控制器/动作。我不想将路由器显眼地暴露给用户。

我对这个问题的最终申请是考虑到电子商务：

  • cms 页面local.com/about-us.html
  • 产品页面local.com/blue-tooth-headset.html
  • 类别页面local.com/phones.html
  • 产品通过类别页面local.com/phones/blue-tooth-headset.html

所以我的问题是，如何在使用backbone.js 时获得漂亮的url？

我对选项的看法是：

  1. 您没有获得 seo 友好的网址
  2. 你有一些巨大的地图，它必须放在客户端上:(
  3. 每次您要更改 url 时，您都会快速 ajax 查找漂亮的 url，并且您需要等待漂亮的 url 在您 pushState 之前返回。
  4. 部分以字母为前缀，即 local.com/p/product-name.html 和 p 实际上用于区分哪个路由器，另一个可能是 c 类别
4

2 回答 2

4

骨干路由几乎可以是任何东西。关于电子商务，您只需要使用冗长的网址：

<category>/<product-name>
television/samsung-i178

但是，这并不是你真正应该关心的关于 SEO 的问题。去年“熊猫”更新后，谷歌在 URL 关键字中增加的价值大多较少。

即使未启用 javascript，您真正应该考虑的是在页面上提供后备和内容。但问题在于您可能不想对您的网站进行两次编码：前端模板/分页引擎 + 加上后端的相同内容。

即将出现的技术将使用 node.js（Mojito、Meteor 等）帮助解决这个问题，但目前它们还不是最稳定的项目。而且，我认为在生产中使用这些可能还为时过早；如果您没有一个真正称职的团队来让您的服务器运行并在需要时调试这些项目。

无论如何，我的意思是，如果 SEO 在您的项目中占很大比重，请不要使用骨干。

编辑： 关于您添加到问题中的内容，我认为这很容易概念化。

在 Backbone 中，您使用可变路由器，如下所示：

routes: {
  "product/:url" : "product" 
}

product: function( prettyUrl ) {
  console.log( prettyUrl );

  // Then you fetch your server
  server.fetch( prettyUrl );
}

然后在您的服务器数据库上，您只需通过产品漂亮的 url 获取您的数据库，例如SELECT * FROM product WHERE prettyurl=$prettyURL（或类似的东西，自从我使用 mySQL 以来已经很长时间了）。

这样，您不必在客户端保留地图，您只需使用服务器为您提供的漂亮 url 即可获取完整产品。

所以当你调用你的集合时fetch，服务器应该返回给你：

{
  id: 1,
  name: "Product XYZ",
  prettyUrl: "product-xyz"
},
{
  id: 2,
  name: "Mac Book Pro",
  prettyUrl: "mac-book-pro"
}

这样，每个漂亮的 url 都由他的模型管理，而不是在路由器中。这绝对是管理此类 URL 的方法。这就是任何 Wordpress 或 Drupal 的主要方式。只有他们在后端这样做。

于 2012-11-04T01:58:54.743 回答
2

有一个仅限 HTML5 的解决方案，它允许您在 Backbone 中保持漂亮的 url。

使用 pushState 集初始化 Backbone.history。 http://documentcloud.github.com/backbone/#History-start

谨防：

If your application is not being served from the root url / of your domain, be sure to tell
History where the root really is, as an option:
Backbone.history.start({pushState: true, root: "/public/search/"})

然后像这样调用 history.navigate ：

navigateToTodo () {
    Backbone.history.navigate('/todos/' + this.model.toJSON().id, {trigger: true});
    return this;
},

或者只是在整个应用程序中使用传统的 href 链接。

示例和说明： 从 Hashbangs 到 HTML5 PushState

IE 的后备：IE 的后备

编辑：所以过了一段时间，现在我开始解决类似的问题，我想我理解你的问题。您想要的与 Backbone 无关，而是转换如下文本： 

"Marissa Mayer can't stop acquiring things" to this "marissa-mayer-can-t-stop-acquiring..."

**您的问题具有误导性，因为您认为 Backbone 正在为您执行此操作，但事实并非如此。所以答案是：你需要的是 Urlify（还有其他的，但在我的经验中没有那么好）。

https://github.com/aliem/urlify

-我将保留旧答案，因为它似乎对搜索此内容的人有所帮助-

于 2012-11-08T13:14:14.177 回答