第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
这些服务的PHP版本(使用超薄框架)是可下载的一部分。一个类似的Java版本的API(使用的JAX-RS)是这个职位的一部分。

使用非RESTful服务Backbone.js

如果你的持久层是不是可以通过RESTful服务,您可以覆盖Backbone.sync。从文档:

Backbone.sync是骨干调用的函数每次尝试读取或保存到服务器模型。默认情况下,它使用(jQuery的/的Zepto)。AJAX使一个RESTful JSON请求。你可以覆盖它,以便使用不同的持久性策略,如的WebSockets,XML传输或本地存储。“

我不讨论在本教程中使用的非RESTful服务。看到文件的更多信息。

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

你可以运行,你将在本教程编写的应用程序。在这个网上版本的创建,更新,删除等功能将被禁用。

这里是第2部分的代码。我讨论了以下关键的变化。

图2。backbone.js代码

dreamweaver  Backbone.js酒窖教程   第2部分:CRUD操作

代码亮点

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组件。例如,在本应用中,我们定义一个标题查看(工具栏),可以作出不同的组件和封装其自身的逻辑。

环境以及示例文件下载:

dreamweaver  Backbone.js酒窖教程   第2部分:CRUD操作

作者 Christophe Coenraets

Tagged with →  

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>