使用从 Node.js (Express.js) 注入的模板的 Backbone.js 视图答案

【问题标题】：Backbone.js views that uses templates injected from Node.js (Express.js)使用从 Node.js (Express.js) 注入的模板的 Backbone.js 视图
【发布时间】：2013-03-29 02:39:05
【问题描述】：

据我在互联网上阅读，如果您想同时使用backbone.js 和node.js，通常您使用node.js（express.js 特别是）作为后端API 提供程序（加上其他功能，如持久化等），而backbone.js是前端的引擎，这意味着提供html模板、视图、模型等。

我在 Internet 和 github 上阅读的主干项目通常以 index.html 开头，该 index.html 直接执行一个 javascript 文件，该文件实例化路由、集合、视图等“类”。前端的视图是负责注入html和css模板，并自行管理视图，如事件等。

当我看到一些项目，如主干.iobind (https://github.com/logicalparadox/backbone.iobind) 时，问题就出现了，它使用了一种非常特殊的配置，我真的不明白它是如何工作的。

如果您看到源代码，node.js 服务器不仅负责 API，还负责注入 Backbone 将使用的 html 模板。我有很多疑问：

谁来执行主干前端，因为没有“索引”来执行执行路由器、视图、集合和历史的 javascript？
如何同步 express.js 注入的模板，以及要使用它们的主干.js 端的视图？
backbone.js 路由器类的用途是什么，因为您正在使用 node.js 路由器来注入东西？
为什么你使用这种架构，而不是像我在开始时描述的那样更干净？

非常感谢您的帮助

【问题讨论】：

你想使用 Socket.IO 风格与服务器通信吗？如果没有，这个 Backbone.JS 扩展不适合你。此外——它只处理功能的一个子集。您仍然可能需要路由器等。您肯定需要模型和集合。它甚至在他们的样本中：github.com/logicalparadox/backbone.iobind/blob/master/example/…
嗨@WiredPrairie，我知道它需要一个骨干路由器，但我不知道为什么，正如我在第三个问题中所描述的那样。我在其他项目中看到了这种模式，比如在@ 987654323@。提前致谢
如果您不需要跟踪历史记录和页面导航，则不需要路由器。
@WiredPrairie，对不起，如果我打扰你，但是，如果你能帮我解决第 1,2 和 4 个问题，可以吗？我不明白您是如何执行 javascript 主干文件的，因为 node.js 中没有执行此操作的代码行，以及 express inyected 视图如何与每个主干视图同步。非常感谢您。

标签： node.js backbone.js express

【解决方案1】：

经过几天的研究，看到互联网上没有关于它的信息，我将回答我自己的问题。希望一些编辑会纠正错误的答案。我要描述的是node.js 和backbone.js 应用程序的“主干”，它从后端而不是前端注入模板，因为社区现在正在发展。为什么开发人员选择两个选项之一？根据不同的变量：安全性、加载和渲染速度等。过程总结：

A.基本上，第一步是在express.js中配置views目录和模板引擎：

    app.set('views', __dirname + '/views');
    app.set('view engine', 'jade');

B.在此之后，我们将在其中找到所有静态资源的中间件。当我们谈论“静态”资源时，我们谈论将在前端执行的图像、javascript、html、css 等：

    app.use(express.static(path.join(__dirname, 'public')));

如果 express（或 connect）在 /public 目录中找到 index.html，它将运行它。如果没有，您必须通过快速路由系统创建路由。

C.我们处于 express.js 从后端注入 HTML 的情况。为此，正如我所写，我们需要一个路由系统，例如：

    app.get('/', require('./views/index').init);

在这里，当express.js检测到用户访问主页面'/'时，它会查找位于/views父目录（不是/public）内的index.js文件，并且会从这里到哪里index.jade 将被渲染并注入到前端：

    res.render('index');

D. index.jade 将提供所需的资源。在我们的例子中，将提供这个 .jade 所需的 CSS、库（jquery、backbone 等），最后，backbone.js 需要的两个元素：

将加载backbone.js 前端的javascript 文件。在这里，所有文件都将位于 /public 目录中：
```
 script(src='/views/index.js')
```
index.jade 还将提供backbone.js 视图所需的模板：
```
 script(type='text/template', id='login')
```

E.有几种不同的backbone.js 配置。通常，您从前端路由器启动主应用程序，所有对象都在此处初始化。但是同步 index.jade 文件、模板和 javescript 视图的执行的主要思想是在 DOM 加载后执行最后一个。出于这个原因，最好的办法是使用下面的 jquery 语句：

     $(document).ready(function() {
        app.view = new app.View();
     });

也许有些人会觉得这个总结是不必要的，但是对于那些不知道把所有都放在前端，或者混合 HTML node.js 后端 + 主干.js 前端的初学者来说，我认为会有用的。首先，结构如何。也许这听起来很疯狂，但互联网上没有解释如何构建它的信息。

最好的问候

【讨论】：