Express 呈现和重用RactiveJS组件/模板的干净方法

好的。为了支持服务器端渲染，我不得不修改一个用expressjs/Ractive编写的应用程序

东西的前端用gulp打包，所有东西都组织成一个干净的嵌套组件结构

是否有任何方法可以利用现有的大部分内容在服务器上呈现其中一些组件？我一直在用黑客攻击，但文档有太多的地方不尽如人意，老实说，我担心它最终会让我孤立无援

在大多数情况下，我的组件包含的模板太多，无法在组件定义中内联使用。它们组织在文件夹层次结构中，最低级别是包含index.js组件定义和template.html模板文件的单个组件文件夹。我使用gulp/browserify过程在构建时拉入那些.html模板文件

我正在寻找一个解决方案，使我能够打包组件，既可以使用browserify/gulp，也可以使用ractive render之类的东西在express中渲染它们

如果不可能的话，这很酷，但到目前为止，我的研究一直让我头疼。

这是可能的–该网站是一个Express应用程序，可以在服务器上呈现吸引人的组件。（FWIW repo是，尽管它是一项永久性的正在进行的工作，除了表明它是可能的之外，它可能没有特别的启发性–共享的

文件夹包含一些在服务器和客户端上呈现的组件）

本质上，您只是实例化了一个与在浏览器中完全相同的Ractive实例，只是没有提供
el
属性或调用
Ractive.render（el）
。而是调用
ractive.toHTML（）

因此，您的express应用程序的一个片段可能如下所示：

var-Article=require（“./components/Article”）；
var fetchArticle=require（'./utils/fetchArticle'）；
变量页=`
...
`;
app.get（'/articles/：slug'，函数（req，res）{
var slug=请求参数slug；
fetchArticle（slug）
.然后（articleData=>{
var ractive=新文章({
数据：{
第条：articleData，
用户：userData
}
});
var html=page
.replace（“”，ractive.toHTML（））；
res.send（html）；
});
});
});

当然，您也可以每次重复使用相同的实例，只需重置数据

Ractive目前没有任何方法逐步增强服务器呈现的HTML–换句话说，当您呈现客户端组件时，您将丢弃现有的DOM。这是我们计划在未来版本中解决的问题