使用YUI3（Y.App）和Symfony2进行渐进式增强

实际上，我们使用symfony2php框架和Twig作为模板引擎。 我们认为可以避免视图层的代码重复，并从渐进增强（p-jax）中获益

当前状态：

PJAX不处理基于路由的页面布局的部分更新。 我们的目标是实现一个系统，当Y.App（路由）处理导航时，只更新一些页面“片段”（HTML节点）

在这方面，我们开始在以下位置实施POC： Javascript可在此处找到： 和Y.应用程序初始配置：

其思想是，当我们第一次加载页面时，一切都由服务器端处理（渐进增强），这意味着整个页面和页面片段都由服务器呈现。 对于应该由Y.App执行的下一个请求，我们定义了如下的JSON格式（/photos path response）：

{
“标题”：“Myawesome网站-照片”//第页，
“碎片”：{
“侧边栏”：“侧边栏菜单”、/…可能是活动页面的更新菜单
“main”：“Photos
”，//预渲染照片列表
},
“模板”：{
“photo\u item\u tpl”：“
”//Y.App稍后用于添加新照片的模板
}
}

这基本上是当前视图内容（路由）的“JSONified”版本

在服务器端，我们检测到请求来自Y.App，而不是呈现我们的细枝模板，我们从中提取“块”，并构建这个JSON响应，其中包含需要更新的页面片段+客户端需要用于此特定页面的把手模板

在客户端（Y.App）：

• 我们定义了一个表示整个页面布局的基本PageCompositeView，然后是一个Page2colLeftView，它继承了这个页面并实例化了自己的子视图：SidebarView、MainView、HeaderView等等
• 我们编写了一个IO模块，它伪造类似PJAX的请求。我们使用它而不是“loadContent”（参见：）
• 在第一次加载时，我们调用showView并尝试将我们的页面子视图“重新连接”到它们各自的容器（请参阅：）
• 在页面中导航时，Y.App了解页面结构

假设我们直接在浏览器中加载“/photos”路径： 1.服务器呈现包含照片列表的整个页面 2.YUI应用程序创建其PageCompositeView并将每个子视图重新连接到其容器 3.YUI应用程序知道“MainView”视图（对应于主要内容）应该包含绑定到“PhotoModelList”模型列表的“PhotoListView”子视图。因此，对“/photos”路径的回调将创建“PhotoView”实例，并将其重新连接到其容器（由服务器呈现）

2和3（特别是3）是手动完成的

POC实际上是有效的

但在进一步讨论之前，我们希望得到您的建议

首先，你觉得这个POC怎么样

我们实际上看到了这种方法的优点和缺点

我们主要关注的是如何调整Y.App以实现我们的目标： -单个复合视图 -在第一次加载时，通过读取现有DOM（即：当服务器呈现照片列表时）对模型进行重新水合 -我们越往前走，就越觉得我们错过了Y.App的一些东西，而且我们走错了方向；-）

但所有这一切的积极方面是，我们可以构建一个完全异步的网站，而无需做这么多工作

我们的主要目标是通过提供一个“几乎完整”的通用解决方案来保持所有东西的可维护性

从这一信息中产生的主要问题可能是：

“我们使用Y.App的方式正确吗？”；-）

那么，你认为呢

谢谢，

---

Cya

对于CMS管理的POC，我做了几乎相同的事情，但有两个不同之处：PJAX响应仍然是一个HTML片段，它包含一个带有JSON编码数据的脚本标记，因此我们不需要查询DOM来重新水化我的模型/模型列表，而是使用其中已有的数据。这允许不依赖任何标记来获得适当的模型，但另一方面，这使得响应的大小稍大一些（但仍然比整个页面负载轻得多）

此外，JSON编码的数据还可能包含一些设置，例如告诉Y.App要使用哪个视图、在哪里找到相应的DOM、模板或其他内容

这是在YUILibrary论坛上讨论的：所以你可以在这里找到其他细节

对于“我们是否以正确的方式使用Y.App？”问题，我认为没有真正的答案。我的意思是YUI应用程序框架是一种可以让你做任何你想做的事情的框架，考虑到你的限制，这只是一个折衷的问题。如果你看几个YUI应用程序示例，它们都有非常不同的策略

但在任何情况下，您的解决方案对我来说都很好，我很高兴看到仍有人在构建逐步增强的应用程序：-）

{
    "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
    }
}