【发布时间】：2013-03-08 10:01:18
【问题描述】：
我们实际上使用 Symfony 2 PHP 框架和 Twig 作为模板引擎。 我们认为我们可以避免 View 层的代码重复并受益于渐进增强 (p-jax)。
当前状态：
PJAX 不处理基于路由的页面布局的部分更新。 我们的目标是实现一个系统，当导航由 Y.App（路由）处理时，只会更新一些页面“片段”（HTML 节点）。
在这方面，我们开始在以下位置实施 POC：https://github.com/benjamindulau/PocSfYui/ Javascript 可以在这里找到：https://github.com/benjamindulau/PocSfYui/tree/master/src/Acme/PocBundle/Resources/public/js 还有Y.App初始配置：https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L66
这个想法是，当我们第一次加载页面时，一切都在服务器端处理（渐进增强），这意味着整个页面和页面片段都由服务器呈现。 对于应该由 Y.App 执行的下一个请求，我们定义了如下 JSON 格式（/photos 路径响应）：
{
"title": "MyAwesomeWebsite - Photos", // page <title>,
"fragments": {
"sidebar": "<h2>Sidebar Menu<\/h2><!-- etc.... -->", // ..... maybe an updated menu for active page
"main": "<h2>Photos<\/h2><div id=\"photo-list-container\"><ul id=\"photo-list\"><!-- photo items.... --></ul></div>", // Pre-rendered photo list
},
"templates": {
"photo_item_tpl": "<li data-id=\"{{index}}\"><img src=\"{{url}}\" alt=\"{{title}}\" \/><\/li>" // template used later by Y.App for adding new photos
}
}
这基本上是当前视图内容（路由）的“JSON 化”版本。
在服务器端，我们检测到请求来自 Y.App，我们没有渲染我们的 Twig 模板，而是从中提取“块”并构造这个 JSON 响应，其中包含需要更新的页面片段 + 车把模板客户对此特定页面的需求。
在客户端（Y.App）：
- 我们定义了一个表示整个页面布局的基本 PageCompositeView，然后定义了一个 Page2colLeftView，它继承自此并实例化自己的子视图：SidebarView、MainView、HeaderView、...
- 我们编写了一个 IO 模块来伪造我们的 PJAX-Like 请求。我们使用它来代替“loadContent”（参见：https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/views/layout.html.twig#L93）
- 在首次加载时，我们调用 showView 并尝试将我们的页面子视图“重新连接”到它们各自的容器（请参阅：https://github.com/benjamindulau/PocSfYui/blob/master/src/Acme/PocBundle/Resources/public/js/views/page.js#L27）
- 在页面中导航时，Y.App 了解页面结构。
假设我们在浏览器中直接加载“/photos”路径： 1.服务器渲染包含照片列表的整个页面 2. YUI App 创建它的 PageCompositeView 并将每个子视图重新连接到它的容器 3. YUI App 知道“MainView”视图（对应于主要内容）应该包含绑定到“PhotoModelList”模型列表的“PhotoListView”子视图。因此，“/photos”路径上的回调会创建“PhotoView”实例并将其重新连接到其容器（由服务器渲染）。
2 和 3（尤其是 3）是手动完成的。
POC 确实有效。
但在继续之前，我们很乐意听取您的建议。
首先，你觉得这个 POC 怎么样？
我们实际上看到了这种方法的优缺点。
我们主要关心的是如何调整 Y.App 以实现我们想要的： - 单个复合视图 - 在第一次加载时，模型通过读取现有的 DOM 重新水化（即：当照片列表由服务器呈现时） - 我们越往前走，就越觉得我们遗漏了 Y.App 的一些东西，而且我们采取了错误的方式；-)
但所有这一切的积极方面是我们可以构建一个完整的异步网站而无需太多工作。
我们的主要目标是通过提供“几乎完整”的通用解决方案来保持一切可维护。
也许从该消息中出现的主要问题是：
“我们是否以正确的方式使用 Y.App？” ;-)
那么，你怎么看？
谢谢， 赛亚
【问题讨论】：
标签： symfony yui3 progressive-enhancement