Backbone.js Wine Cellar中CRUD的示例分析

边肖将与你分享主干酒窖中原油的样本分析。希望大家看完这篇文章后有所收获。我们一起讨论一下吧！

您将学习创建、更新和删除(CRUD)葡萄酒。

HTTP 方法

URL

操作

得到

/API/葡萄酒

搜索所有葡萄酒

得到

/api/wines/10

搜索id=10的葡萄酒

邮政

/API/葡萄酒

添加新酒

放

/api/wines/10

用id==10更新葡萄酒

删除

/api/wines/10

删除id==10的葡萄酒

这些服务的PHP版本(使用Slim框架)将随下载的内容一起提供。本文还将提供类似的Java版本的API(使用JAX-RS)。

搭配使用 Backbone.js 和非 RESTful 服务

如果RESTful服务不能提供您的持久层，您可以替换主干网。同步在本文档中：

“Backbone.sync是Backbone每次试图读取模型或将其保存到服务器时都会调用的一个函数。默认情况下，它使用(jQuery/Zepto)。ajax发出RESTful JSON请求。您可以替换它来利用不同的持久性策略，例如网络套接字、XML传输或本地存储。”

在本教程中，我不会讨论非RESTful服务的使用。有关更多信息，请参见文档。

添加创建、更新和删除功能

您可以运行将在本教程中编码的应用程序。此在线版本的创建、更新和删除功能已被禁用。

此在线版本的创建、更新和删除功能已被禁用。

图2。主干. js代码

代码重点

Wine(2号线至14号线)

第二部分为葡萄酒模型添加了两个属性，如下所示：

(1)urlRoot(3号线):RESTful服务终端将检索或保存模型数据。请注意，只有在检索/保存独立于集合的模型时，此属性才是必需的。如果模型是集合的一部分，那么集合中定义的URL属性就足以让Backbone.js知道如何使用RESTful API来检索、更新或删除数据。

(2)Defaults(第4行):创建模型新实例时使用的默认值。此属性是可选的。然而，这个应用程序需要使用这个属性来提示葡萄酒细节信息模板呈现一个“空的”葡萄酒模型对象(这将在添加新葡萄酒时发生)。

WineListView(22号线至40号线)

当用户添加新酒时，您希望它自动出现在列表中。为此，将视图绑定到WineListView模型(葡萄酒集合)的add事件。当事件被触发时，应用程序创建一个新的WineListItemView实例，并将其添加到列表中。

WineListItemView(42号线至62号线)

(1)当用户更改葡萄酒时，您希望相应的WineListItemView自动重新出现以反映这一更改。为此，请将视图绑定到其模型的变更事件，然后在事件被触发时执行渲染功能。同样，当用户删除葡萄酒时，您希望自动删除列表项。

(2)为此，请将视图绑定到其模型的销毁事件，然后在事件被触发时执行我们自定义的Close函数。重要注意事项:为了避免内存泄漏和事件的反复触发，

重要的是先解除事件侦听器绑定，然后再从 DOM 中删除列表项。

(3)请注意，无论发生哪种情况，您都不用承担重新呈现整个列表的费用。您只能重新呈现或删除受更改影响的列表项。

WineView（第 64 行至第 123 行）

本着封装精神，Save 和 Delete 按钮的事件处理程序均在 WineView 内部进行定义，这与将它们作为自由悬挂式代码块在“类”定义外部定义截然相反。使用 Backbone.js 事件语法，采用 jQuery 幕后委托机制。

您始终可以根据用户在表单中的输入内容采用以下不同方法来更新模型：

(1)“实时”方法：使用更改处理程序在表单更改时更新模型。这种方法从本质上而言是双向数据绑定方法。模型和 UI 控件始终同步。您可以利用这种方法选择将更改实时发送至服务器（隐式保存），还是等到用户单击 Save 按钮时再发送更改（显示保存）。***个选项在存在交叉字段验证规则时不正式也不可行。而第二个选项可能需要您撤销模型更改，如果用户在未单击 Save 的情况下导航至其他项目的话。

(2)“延迟”方法：等到用户单击 Save 时再根据 UI 控件的新值更新模型，然后将这些更改发送至服务器。

本讨论主题并非 Backbone.js 特有，因此本文并未就此进行探讨。为简单起见，我在此处使用延迟方法。但是，我依然导入更改事件，并利用其记录控制台更改。我发现此方法在调试应用程序（特别是要确保我已经清除绑定，请参见 Close 函数）时非常有效。如果您发现更改事件触发多次，则可能没有相应地清除绑定。

HeaderView（第 125 行至第 148 行）

Backbone.js 视图通常用于呈现域模型（比如 WineListView、WineListItemView 及 Wine View）。但它们也可以用来创建复合 UI 组件。例如，在此应用程序中，我们定义的标头视图（一种工具栏）可由多个不同组件构成，并且可以封装其自身逻辑。

看完了这篇文章，相信你对“Backbone.js Wine Cellar中CRUD的示例分析”有了一定的了解，如果想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！