背景
从2年多前开始(使用Batman.js& node.js)我开始尝试在服务器和客户端上执行相同的DOM代码。这需要具有可以使用pushState
呈现的SPA(单页应用程序),并且可以在已经为SEO呈现的页面的路由中访问并且具有卓越的用户体验(没有与SPA呈现相关联的页面“flash”)页面加载后的元素)。这通常涉及在if
语句中包装模块,以检查模块是在window
中执行还是在require.js中被执行,或者作为node.js中的模块等。
客户端+服务器SPA的当前实现
Rendr& Ezel都试图帮助将客户端+服务器代码共享和DOM呈现功能引入Backbone SPA。 Ezel在Backbone模型/集合中具有魔力,但在客户端上使用Express + Jade时,在服务器上使用Backbone.View + Jade呈现视图。这意味着在扩展的Backbone.View中使用Rivets之类的内容不会导致HTML命中Rivets预呈现的客户端。我想构建一些最好的实践和技术来自己渲染DOM服务器端以保持简单(在一个地方编辑视图代码)和灵活(能够添加Ezel当前不支持的其他DOM操作模块) )。
所需结果
我希望使用类似Rivets的内容将模型数据注入到视图中,然后在通过HTTP点击整页加载路由时,从Express向浏览器提供页面请求,并且还必须通过客户端上的pushState
响应更改。节点中的环境要求是什么让我能够在服务器上使用Rivets来修改HTML并在客户端上保持绑定?如何最好地将jQuery,Backbone,Rivets等引入node.js,让它们在HTML模板的DOM上运行,然后提供结果预先渲染(同时在客户端上保持正常的JS行为)?
相关模块
Sharify& Browserify都是可以帮助在各方之间共享代码的工具。 Rivets,Backbone& jQuery都有node.js兼容的发行版。
当前工作
我已开始通过Ezel向fork on Github添加功能。
答案 0 :(得分:2)
通过使用jsdom构建在Ezel之上,我能够实现具有近乎纯粹的同构JavaScript应用程序。 jsdom会导致性能下降,因此我尽可能缓存了在服务器上运行铆钉的结果。
我从https://github.com/adjohnson916/rivets-server获得了一些线索。我无法使用该模块批发,因为它踩了我需要发送到铆钉的几个配置选项(铆钉 - 服务器使用铆钉叉)。
我最初遇到的一个陷阱与使用Sharify& amp;同时铆钉。 Sharify将一个脚本注入到包含一个函数的网页中,并且因为它使用{}进行模板操作而绊倒了铆钉。通过将templateDelimiters
改为双花括号,我绕过了这个问题。
同构JavaScript应用程序的主要组件是:
require
(例如Browserify)