Backbone.js Wine Cellar 教程三：深层链接和应用程序状态

原文地址：http://www.189works.com/article-74545-1.html

在第一部分：入门中，我们构建了 Wine Cellar 应用程序的基本结构。在Part 2: CRUD中，我们添加了创建、更新及删除 (CRUD) 葡萄酒的功能。

　　该应用程序中依然存在几个遗留问题，并且均与“深层链接”有关。该应用程序需要持续保持自身 URL 与其当前状态同步。这样，您本人及您的用户即可在应用过程中随时从地址栏中获取 URL，重用并共享 URL，以便返回完全相同的状态。

　　在第三部分中，我们在 Wine Cellar 应用程序中添加了深层链接支持。

　　根据第三部分运行 应用程序。此联机版本已禁用创建/更新/删除功能。

　　问题：

　　从应用程序列表中选择一款特定的葡萄酒。URL 显示如下：http://www.coenraets.org/backbone-cellar/part2/#wines/[id].

　　此时，在运行的应用程序内执行以下选项之一：

　　从地址栏中获取该 URL，然后尝试从其他浏览器窗口或选项卡进行访问

　　只简单地单击浏览器的 Refresh 按钮

　　您将会看到一个没有任何数据的空白屏幕。如果查看调试控制台(例如在 Chrome 开发人员工具中)，您将会看到以下信息：

　　167 Uncaught TypeError: Cannot call method 'get' of undefined

　　现在让我们来看一下代码，如下所示：

　　图 1. 将 URL 复制到另一个浏览器或选项卡式浏览器窗口时导致出现空白屏幕的问题

　该问题显示在第 20 行。我们编写的代码假设葡萄酒集合 (this.wineList) 已经存在，我们设法从该列表中“获取”某个特定项。当用户使用默认 (“”) 路径启动应用程序时，代码运行良好。但如果用户使用 “wines/:id” 路径启动应用程序时，this.wineList 不存在。有多种不同方法可以解决这一问题，如以下方案所述。

　　我们可以修改 wineDetails 函数以直接获取请求项。

　　图 2. 一种方案是修改 wineDetails 函数以直接获取请求项

　　这样可加载表单中的葡萄酒详细信息，但当用户使用 “wines/:id” 路径启动应用程序时，葡萄酒列表依然空白。

　　我们可以添加下列代码行，以便在列表不存在时加载列表。

　　图 3. 另一种方案是在列表不存在时加载列表

　　但现在，该集合所含的葡萄酒模型与单独获取的葡萄酒模型是两个截然不同的对象，这意味着数据绑定和视图同步将不会按预期运行。

　　我们可以在 wineDetails 函数中查看集合是否存在。如果确实存在，只需“获取”该请求项，并像之前一样进行呈现即可。如果不存在，以变量的形式存储请求 ID，然后调用现有的 list() 函数填充列表。随后，我们会修改 list() 函数。在从服务器(成功)获取列表后，检查其中是否具有请求 ID。如果有，调用 wineDetails 函数呈现相应的项。

　　图 4. 检查集合是否存在，然后再确定下一步操作。建议采取这项最终方案。

 问题 2：在用户添加葡萄酒后更新 URL

       根据第三部分运行 应用程序。此联机版本已禁用创建/更新/删除功能。

       问题：

       1.添加新葡萄酒。

      2.单击 Save。已经分配给新建葡萄酒的 ID 将显示在表单域中。但 URL 仍为：
http://localhost/backbone-cellar/part2/ ，而实际 URL 应为： http://localhost/backbone-cellar/part2/#wines/[id].

       您可以通过使用路由器的导航功能更改 URL 来轻松地解决这一问题。第二个参数 (false) 表示我们实际上不想“执行”该路由，只想更改 URL。

        图 5. 修复问题：在用户添加葡萄酒后更新 URL

      问题 3：在创建新葡萄酒时更新 URL

       根据第三部分运行 应用程序。此联机版本已禁用创建/更新/删除功能。

      问题：

1. 从列表中选择葡萄酒。
2. URL 显示如下：http://localhost/backbone-cellar/part2/#wines/[id]
3. 单击 Add Wine 按钮。您将会看到一个用以输入新葡萄酒的空表单，但请注意，URL 仍未改变 (http://localhost/backbone-cellar/part2/#wines/[id])。换句话说，它不会反映该应用程序的当前状态。

        要解决这一问题，请添加新的“路由”：

       图 6. 通过添加新“路由”解决这一问题

        路由器的 newWine 方法如下所示：

        图 7. 接下来，重写 newWine 方法

        更改 HeaderView newWine() 方法，如下所示：

        图 8. 更改 HeaderView newWine() 方法