Question

就我在互联网上阅读而言，如果你想同时使用backbone.js和node.js，通常你会使用node.js（express.js specificy）作为后端API提供者（以及其他函数，像persistance一样），虽然backbone.js是前端的引擎，但它意味着提供了html模板，视图，模型等。

我在互联网和github上读过的骨干项目，通常以index.html开始，它直接执行一个javascript文件，实例化路由，集合，视图等“类”。前端的视图是负责隐藏html和css模板并自行管理视图，如事件等。

当我看到像backbone.iobind（https://github.com/logicalparadox/backbone.iobind）这样的项目时会出现问题，它使用的是我真正不理解的非常特殊的配置以及它是如何工作的。

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

谁执行骨干前端，因为没有“索引”执行执行路由器，视图，集合和历史记录的javascript？
如何同步express.js所引用的模板，以及将要使用它们的backbone.js端的视图？
什么是backbone.js路由器类的目的，因为你使用node.js路由器进行入侵？
为什么你使用这种架构，而不是像我在开头所描述的那样更干净？

非常感谢您的帮助

Answer 1

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

一个。基本上，第一步是在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，它将运行它。如果没有，您必须通过快速路由系统创建路由。

℃。我们是在express.js从后端传入HTML的情况下。为此，正如我所写，我们需要一个路由系统，如：

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

在这里，当express.js检测到用户访问主页'/'时，它会查找和index.js文件位于/ views父目录（不是/ public），并将从这里开始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')
```

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

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

也许有些人会发现这个摘要是不必要的，但对于那些不知道在前端拥有所有内容之间的区别，或者混合HTML node.js后端+ backbone.js前端的开销者，我认为会有用的。最重要的是，结构如何。也许这听起来很疯狂，但互联网上没有任何信息可以解释如何构建它。

最好的问候

Answer 2

我没有足够的代表评论你的答案迈克尔，所以我必须把它放在这里，抱歉。

无论如何，你得到的文件夹结构是这样的：

appname
  |--models
  |  |--appmodel.js
  |--public
  |  |  |--webapp // extjs/backbone files
  |  |  |  |--models
  |  |  |  |--controllers
  |  |  |  |--css
  |  |  |  |--js
  |  |  |  |--img
  |  |  |  |--views
  |  |  |  |  |--appview.ejs
  |  |  |  |  |--extbasedview.ejs
  |--routes
  |  |--router.js
  |--app.js

我找到了here

使用从Node.js（Express.js）注入的模板的Backbone.js视图

2 个答案: