node.js - 使用 node.js 和backbone.js 进行模板渲染

标签 node.js backbone.js

有没有人找到一个好的解决方案来开发可以在服务器和客户端上使用的backbone.js 模板?

backbone.js 历史堆栈真的很理想,因为用户可以在浏览器位置栏中共享和链接到真实的 url,并且 node.js 服务器可以在使用相同的模板时在第一个页面 View 上呈现页面在客户端中以在后续页面 View 中重建页面。

这也将为用户和搜索链接提供理想的输出,而无需解析或执行 javascript 即可查看完全呈现和工作的页面。

更新了更多信息:

这似乎有两种可能的方法:

1) 骨头 - https://github.com/developmentseed/bones

Bones 需要安装一些怪癖,目前需要旧版本的 node 和 npm。

2) 胶囊 - https://github.com/andyet/capsule

我还没有尝试过,但看起来很相似。如果有人对这些项目中的任何一个感兴趣,我会很感兴趣。

最佳答案

我目前正在处理 framework named "onecode"这可以满足您的要求。目前它缺乏文档,但我有一个基于它的工作项目,所以它也可以为你工作。我也在寻找贡献者。

这是它的工作原理。几乎所有代码都在客户端和服务器之间共享,包括模型和 View 。

  1. 在服务器上,您创建一个 REST API,您可以在其中定义业务规则、安全性、数据库操作,以及您无法信任客户端的所有内容。
  2. 当第一次请求页面时(直接,使用重写的 $.ajax 方法),客户端(使用标准 Backbone Ajax 调用)和服务器本身都使用此 API。
  3. 当客户端请求页面时,服务器会创建所有需要的模型和 View ,直接向 API 发出请求并呈现 HTML。此外,它会记住来自 API 调用的所有数据以及哪些 HTML 元素对应于哪些 View 。
  4. 模型/ View 代码、HTML 和数据提供给客户端。在这里,HTML 是完全呈现和功能的,所以即使用户关闭了 JavaScript,他也可以点击链接并浏览网站(他当然不会获得任何动态功能)。但是,如果启用了 Javascript,所有模型和 View 都会在后台自动重新创建并重新绑定(bind)到 DOM Node ,而不是让用户等待。
  5. 之后,应用程序就像一个单页应用程序一样工作,只从同一个 API 请求数据 (json),在客户端呈现模板。

这意味着:

  1. 您只需编写一次演示文稿和动态代码。
  2. 第一个请求的页面以闪电般的速度提供并显示给用户,不需要等待所有脚本加载和运行,只需 HTML/CSS。
  3. 下一页也非常快,因为只请求原始数据,模板在客户端呈现。您还可以使其具有视觉吸引力,而不是通常的页面重新加载。您甚至可以在用户浏览网站时播放音乐。
  4. 搜索引擎和社交网络爱你。

架构强制要求一些合理的要求,这将使您成为更好的开发人员。比如:

  1. 服务器操作和业务规则需要单独的、定义良好的 API。
  2. 没有全局变量。
  3. View 的处理比一般 Backbone 更严格,更像是可堆叠的 UI 组件。
  4. HTML 呈现和动态行为之间的明确区分。

可以找到一个非常简单的例子in the source tree .我使用 Backbone 作为模型和 View 的基础,以及 Browserify将js包传递给客户端。

在我的项目中,我使用带有 EJS 的内联模板作为模板引擎。这样做的好处是将 HTML 和代码(我使用 CoffeeScript)放在同一个地方。但是该框架能够使用 Jade 等其他模板引擎从外部文件打包模板。请查看 templating example关于如何做到这一点。

如果您对这种方法感兴趣,请告诉我,也许它会促使我开始为它编写文档。

关于node.js - 使用 node.js 和backbone.js 进行模板渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9023291/

相关文章:

node.js - 当Node.js进入uv_io_poll时

cordova - 在同步之前将主干模型和集合存储在phonegap singlep页面应用程序中

javascript - Cubism 未在回调上绘制更新数据

javascript - Backbone Marionette 没有射击路线

backbone.js - 复杂主干应用程序中的事件管理

javascript - 停止集合对自身进行排序,但仍然能够对 i 进行排序

node.js - 无法在 TypeORM 中以一对一关系更新数据

javascript - 是否可以检查集合或子集合是否存在?

javascript - 深入兔子洞 - "res"在express和/或nodejs中来自哪里?

node.js - Meteor:ArrayBuffer(FileReader 结果)未传递给 Meteor.method()