在第1部分:入门本教程中,我们设立酒窖应用程序的基本设施。应用程序到目前为止是只读的,因此只允许您检索的葡萄酒列表,显示您所选择的葡萄酒的细节。
在这第二批,你将添加能够创建,更新和删除(CRUD)葡萄酒。
| HTTP方式 | 目录 | Action动作 |
| GET | /api/wines | Retrieve all wines |
| GET | /api/wines/10 | Retrieve wine with id == 10 |
| POST | /api/wines | Add a new wine |
| PUT | /api/wines/10 | Update wine with id == 10 |
| DELETE | /api/wines/10 | Delete wine with id == 10 |
使用非RESTful服务Backbone.js
如果你的持久层是不是可以通过RESTful服务,您可以覆盖Backbone.sync。从文档:
“Backbone.sync是骨干调用的函数每次尝试读取或保存到服务器模型。默认情况下,它使用(jQuery的/的Zepto)。AJAX使一个RESTful JSON请求。你可以覆盖它,以便使用不同的持久性策略,如的WebSockets,XML传输或本地存储。“
我不讨论在本教程中使用的非RESTful服务。看到文件的更多信息。
添加创建,更新和删除功能
你可以运行,你将在本教程编写的应用程序。在这个网上版本的创建,更新,删除等功能将被禁用。
这里是第2部分的代码。我讨论了以下关键的变化。

代码亮点
wine(2-14行)
第2部分葡萄酒的楷模,增加了两个属性如下:
- UrlRoot(3):RESTful服务端点检索或保存模型数据。请注意,只需要检索/坚持不属于集合的一部分的模型时,此属性。如果模型是集合的一部分,集合中定义的URL属性是为Backbone.js足够知道如何检索,更新,或删除数据,使用您的RESTful API。
- Defaults(4):模型的一个新的实例被创建时使用的默认值。此属性是可选的。然而,它需要在这个葡萄酒的详细信息模板的应用,呈现一个“空”酒模型对象(其中添加新酒时发生)。
WineListView(行22-40)
当用户添加一个新的酒,你想让它自动出现在列表中。要做到这一点,结合查看的WineListView模型添加事件(这是葡萄酒的集合)。该事件被触发时,应用程序创建,并增加了一个新的实例的WineListItemView列表。
WineListItemView(行42-62)
- 当用户改变酒,你要相应WineListItemView自动重新呈现以反映变化。要做到这一点,绑定到其模型的变化事件,并触发事件时,执行的渲染功能。同样,当用户删除了酒,你想要的列表项被自动删除。
- 要做到这一点,视图绑定到其模型的破坏事件,并执行我们自定义关闭功能,当事件被触发。重要提示:为了避免内存泄漏和发射多次的事件,重要的是要解除之前删除的事件监听器从DOM中列出的项目。
- 请注意,在任何情况下,您不必重新渲染整个列表的开销。你只能重新渲染或删除列表项的变化影响。
WineView(64-123线)
在封装的精神,为保存和删除按钮的事件处理程序内WineView定义,而不是定义为自由悬挂外的“类”的定义的代码块。使用的Backbone.js事件的语法,它使用jQuery的委托机制幕后。
总是有不同的方法来更新基于用户输入表单模型:
- “Real time”的方式:您使用的变化处理,更新模型变化形式。这是本质的双向数据绑定。模型和UI控件始终保持同步。使用这种方法,那么你可以选择发送的实时变化到服务器(隐保存)之间,或等待,直到用户点击保存按钮(明确保存)。第一个选项可以有交叉字段验证规则时,健谈的和不切实际的。第二个选项可能需要您撤消模式的变化,如果用户不点击保存导航到另一个项目。
- “Delayed”的方式:你等着,直到用户点击保存更新UI控件的新值基础模型,然后将更改发送到服务器。
这个讨论是不是具体到Backbone.js和因此超出了这个职位的范围。为简单起见,我在这里使用延迟的方法。不过,我还是有线更改事件,并用它来登录控制台的变化。我发现这个调试应用程序时非常有用,特别是要确保我清理我的绑定(关闭功能)。如果你看到发射多次更改事件,你可能没有清理适当的绑定。
HeaderView(125-148线)
backbone.js意见通常用来渲染域模型(做,在WineListView,WineListItemView,与葡萄酒查看)。但它们也可以用来创建复合的UI组件。例如,在本应用中,我们定义一个标题查看(工具栏),可以作出不同的组件和封装其自身的逻辑。
环境以及示例文件下载:
- Download the source code for Part 2 of the Wine Cellar application on GitHub.
- You will need the RESTful services to run this application. A PHP version (using the Slim framework) is available as part of the download.
- You can download different versions of the Wine Cellar application:
- Download a version of this application with a Java back-end (using JAX-RS and Jersey) on GitHub. Read about the Java version of this application in my blog post, Using Backbone.js with a RESTful Java Back-End.
- Download the non-Backbone Java back-endor the PHP back-end.

作者 Christophe Coenraets





























