Question

是否有人为开发可在服务器和客户端上使用的backbone.js模板找到了一个很好的解决方案？

这对于backbone.js历史堆栈来说是非常理想的，因为用户可以在浏览器位置栏中共享和链接到真实的URL，而node.js服务器可以在第一页面视图上呈现页面，同时使用相同的模板在客户端中重建后续页面视图中的页面。

这也将为用户和搜索引擎提供理想的输出，这些搜索引擎可以抓取链接，而不必解析或执行javascript来查看完全呈现和工作的页面。

更新了更多信息：

两种可能的方法似乎是：

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

Bones有一些安装怪癖，目前需要旧版本的节点和npm。

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

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

Answer 1

我目前正致力于framework named "onecode"做你要求的事情。目前它缺乏文档，但我有一个基于它的工作项目，所以它也可以为你工作。我也在寻找贡献者。

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

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

这意味着：

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

该架构强制要求一些理智的要求，这将使您成为更好的开发人员。类似的东西：

服务器操作和业务规则所需的单独，明确定义的API。
没有全局变量。
视图的处理比一般Backbone更严格，更像是可堆叠的UI组件。
明确区分HTML呈现和动态行为。

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

在我的项目中，我使用带有EJS的内联模板作为模板引擎。这有利于在同一个地方保留HTML和代码（我使用CoffeeScript）。但该框架能够使用其他模板引擎（如Jade）从外部文件打包模板。请查看templating example如何完成。

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

Answer 2

我没有将它用于节点，但我已经为backbone.js广泛使用了胡子并对结果感到满意，并且它有一个端口可以将它与节点一起使用。

http://mustache.github.com/

Answer 3

在选择模板语言方面，你几乎可以选择任何基于js的模板语言，包括Underscore Templates，Mustache或Handlebars - 设置它是微不足道的在服务器端生成内容时，Node.js应用程序也会读取的公共可访问路径中的模板。

我个人最喜欢的是Jade，它是Express开箱即用的 - 它强制执行一种非常简单，富有表现力的编码风格。

您可以找到关于如何将Backbone.js和Express here链接在一起的好文章（使用Jade作为模板语言）。

大多数示例都倾向于如何设置一个完全呈现客户端的RESTful应用程序（而不是你真正想要的那样）。

但是，如果您使用可公开访问的文件夹中的模板在Express中进行Web应用程序渲染（我建议将视图分开 - 预处理模板并将html移交给您的视图，以便保持模板的具体化）然后“我们也可以从Backbone.js加载它们，并使用Backbone.js的历史堆栈处理更改。

Answer 4

您可以使用JSDOM使用node.js呈现您的网页，如下所示

// specify a catch all route
app.get('/namespace/*', function (req, res, next) {
  // load the dom
  jsdom.env({
    html: html,
    src: src,
    features: {
      FetchExternalResources: false,
      ProcessExternalResources: false 
    },
    done: function (err, window) {
      // overwrite Backbone's sync method with a server-side one
      window.Backbone.sync = sync
      window.$(function () {
        window.Backbone.history.start({ silent: true })

        // load requested url
        var matched = window.Backbone.history.loadUrl(req.originalUrl.substr(1))
        if (matched) // if matched: return resulting html
          res.end(window.document.innerHTML)
        else
          next()
      })
    }
  })
})

因此，您还必须指定以下变量

var sync = function(method, model, options, error) {
  // your server side sync method
}

var html = fs.readFileSync(path.join(__dirname, 'views/index.htm'), 'utf-8')
var src = [
  fs.readFileSync(path.join(__dirname, 'public/javascripts/jquery.js'), 'utf-8'),
  fs.readFileSync(path.join(__dirname, 'public/javascripts/underscore.js'), 'utf-8'),
  fs.readFileSync(path.join(__dirname, 'public/javascripts/backbone.js'), 'utf-8'),
  fs.readFileSync(path.join(__dirname, 'public/javascripts/your-backbone-stuff.js'), 'utf-8')
]

不幸的是，我没有找到复制创建的窗口/文档对象以供重用的解决方案。

此解决方案也仅适用于例如搜索引擎因为缺少从Backbone Views到相应DOM节点的客户端映射。

Answer 5

尝试https://github.com/flatiron/plates

在两种环境中均可正常运行，无需DSL且具有干净的API

Answer 6

在https://github.com/BorisMoore/jsrender尝试 jsrender 。

它是jQuery tmpl的重写，并不需要jQuery或任何DOM。它是一个独立的文件，作者保持新鲜感。

jsrender是用于模板化的字符串替换引擎。我们将它用于NodeJS中的动态和静态页面。我们还将它用于非HTML模板，例如XML，CSV和基于文本的电子邮件。虽然它尚未处于生产模式，但我们已经使用了几个月，而且到目前为止开发非常稳定。

在http://borismoore.github.com/jsrender/demos/demos.html处查看一些很酷的演示。

最简单的，你可以做foreach循环。但是，如果您正在进行专家路线或冒险，您可以运行JS代码（内联或作为函数传递，a.k.a。帮助程序）。当然，在表示层中包含代码是不好的，但有时用您喜欢的语言进行简单的odd（）/ even（）或nth + 1计算并不会有什么坏处。只需确保您在层之间有一个很好的理解并承担风险。

Answer 7

具有nunjucks模板的Node.js对我来说效果很好，因为我需要非SGML网页内容的非XML模板（nunjucks允许在文本模板中设置模板分隔符 - 这就是jinja2 for Python的情况，其中nunjucks是重新参加）

Answer 8

这是在NodeJS中渲染下划线/骨干模板的一个非常简单的示例。我已经使用NPM安装了Underscore。

var http = require('http'),
    _ = require('underscore');

http.createServer(function (req, res) {
    var template = "<h1><%=message%></h1>"
    res.end(_.template( template, {message: "Hello world"}));
}).listen(8080, 'localhost');

Answer 9

我尝试了很多解决方案，http://ezeljs.com/绝对是最简单，最容易实现的。这才有意义。

Backbone项目的样板，它共享代码服务器/客户端，渲染服务器/客户端，并通过模块化架构进行扩展。

对服务器和客户端使用Jade模板。 Browserify和使用Jade变换绝对是我在客户端和服务器上共享模板的首选方法。

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

9 个答案: