Zend和jQuery - 由许多动作组成的表单

Question

我即将启动Zend中的一些复杂的网页和表单.由于很多这将是我的新领域,我希望你能在我开始之前给我一些关于我的方法的反馈.

我正在使用的信息通常为1-n,例如"1个组织有n个产品".这是我正在研究的这个等式的子部分.从本质上讲,我希望用户能够从单个URL(如mydomain/products/index)添加,查看,更新和删除子项.

请注意,用户可以拥有"成员"或"管理员"权限.

我看到的关键组件是:

• Zend ACL
• 一个扩展的ActionStack Action Helper
• AjaxContext Action Helper
• jQuery的

这是我看到它如何工作:

• ACL是早期配置的(作为资源插件或早期运行的前端控制器插件)
• 请求的操作(例如/ products/index)使用扩展的ActionStack Helper将操作推送到堆栈
• 扩展的ActionStack Helper在将操作添加到堆栈之前查询ACL(调用isAllowed())

这应该加载初始页面.我认为,对于正式特权的用户,它将包括所有产品的表格,包括"删除"和"编辑"链接的列,以及表格底部的"产品添加"表单.

当用户点击链接时:

• jQuery处理事件并向特定操作发送XHR请求(例如/ products/add)
• 特定操作(启用了适当的上下文),返回适当的响应
• jQuery需要操纵DOM来合并新内容

听起来不错吗？你将做点什么不同的？

我以前没有使用过ActionStack或AjaxContext Helpers,而且对jQuery的使用经验有限.尽管如此,这一切看起来都相当简单.

非常感谢您的想法!

Answer 1

在这种情况下，您不需要操作堆栈。操作堆栈用于在一个请求期间分派多个操作。这里“只是”一个产品/索引操作，它加载所有可用的产品（视图可能会将其呈现到表中）。所有其他操作稍后都会通过新的（或不是 XmlHttp）请求进行分发。

我们过去所做的是将模态用于一些简单的表单。用户单击“添加产品”，jQuery 对产品/添加执行 XHR。此操作启用了 ajax (ajaxContext)，并且仅返回表单而不返回布局。该响应将呈现为模式对话框的内容。该模式有两个按钮，一个用于提交表单，一个用于取消表单。取消很简单（参见 jQuery 文档，只需关闭模式）。提交会触发模式内表单的提交，然后关闭模式。

通过这种设置，我们非常灵活。您还可以使用<a>带有附加参数的元素来呈现模式：

<a href="products/add" data-title="Add a new product" data-submit="Add product">Add product</a>

我们使用 data-title 来呈现模式的标题，并使用 data-submit 来呈现提交按钮的值。如果您实施了 ACL，XHR 可以查看响应代码。对于 403 状态，内容只是一条消息，表明这是一个错误，并且不应允许用户添加产品。实际上，您不应该有“添加产品”链接，但恕我直言，最好实施 403 状态检查作为附加措施。

接下来要解决的可能是你们的一对一关系。例如，您在产品/添加页面添加产品。在那里您可以<select>选择组织。紧接着<select>有一个“或添加新组织”链接。此链接的行为如上所述：modal、XHR、ajaxContext。提交表单后，您还会听到回复。您可以实施您的操作，以便在成功将组织持久保存到数据库后返回一个 JSON 字符串。JSON 被发送回浏览器并在 XHR 的响应中获取。您编写一段代码来获取此 JSON 数据（例如，它是一个organization.id 和organization.name），将其注入到 select ( <option value="id">Name</option>) 中并选择该选项。

这种方法很灵活，可以通用，而且实现起来并不困难。您唯一需要注意的部分是表单错误。POST 后，表单可能无效。这意味着响应可以是 JSON 返回，也可以是带有表单和错误消息的 html。对于后者，您需要用响应替换模式的内容，并让用户重试。这是一个小收获，但却是一个非常重要的收获。