使用YUI3(Y.App)和Symfony2逐步增强

Question

我们实际上使用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 path response):

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

这基本上是当前视图内容(路由)的"JSONified"版本.

在服务器端,我们检测到请求来自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应用程序创建其PageCompositeView并将每个子视图重新连接到其容器3.YUI应用程序知道"MainView"视图(对应于主要内容)应包含绑定到"PhotoModelList"模型列表的"PhotoListView"子视图.因此,"/ photos"路径上的回调会创建"PhotoView"实例并将其重新连接到其容器(由服务器呈现).

手动完成2和3(尤其是3).

POC实际上是有效的.

但在走得更远之前,我们很乐意得到你的意见.

首先,您对此POC有何看法？

我们实际上看到了这种方法的利弊.

我们主要关注的是如何调整Y.App以实现我们想要的: - 单个复合视图 - 在第一次加载时,通过读取现有DOM(即:当服务器呈现照片列表时)重新补充模型 - 我们向前迈进的越多,我们就越认为我们错过了关于Y.App的东西,而且我们采取了错误的方式;-)

但关于这一切的积极方面是我们可以构建一个完整的异步网站而不需要那么多工作.

我们的主要目标是通过提供"几乎完整"的通用解决方案来保持一切可维护性.

也许从该消息中出现的主要问题是:

"我们正在以正确的方式使用Y.App吗？" ;-)

所以你怎么看 ？

谢谢,Cya

Answer 1

对于 CMS 管理的 POC，我做了几乎相同的操作，但有 2 个区别：PJAX 响应仍然是一个 HTML 片段，它包含一个带有 JSON 编码数据的脚本标记，因此不需要查询 DOM 来补充我的模型/模型列表，我们使用其中已有的数据。这允许不依赖任何标记来获取正确的模型，但另一方面，这使得响应的大小更大一些（但仍然比整页加载轻得多）。

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

这在 YUILibrary 论坛上进行了讨论：http://yuilibrary.com/forum/viewtopic.php? t=11877，因此您可以在这里找到其他详细信息。

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

但无论如何，您的解决方案对我来说似乎非常好，我很高兴看到仍然有人构建逐步增强的应用程序:-)