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

据我所知,如果你想一起使用backbone.js和node.js,你通常使用node.js(express.js particulary)作为后端API提供者(加上其他的function,比如persistance,等等),而backbone.js是前端的引擎,也就是说,提供了html模板,视图,模型等。

我在互联网和github上看到的主干项目,通常以一个index.html开头,直接执行一个javascript文件,像路由,集合,视图等实例化“类”。前端的视图负责监视html和css模板并自行pipe理视图,如事件等

当我看到像backbone.iobind( https://github.com/logicalparadox/backbone.iobind )这样的项目时,会出现这个问题,它使用了一个非常特殊的configuration,我真的不知道它是如何工作的。

如果您看到源代码,那么node.js服务器不仅是API的责任,而且是为了监视将由Backbone使用的html模板。 我有很多疑问:

  1. 谁执行骨干前端,因为没有“索引”,执行JavaScript,执行路由器,视图,集合和历史?

  2. 你如何同步express.js的inyected模板,以及backbone.js端的视图是否要使用它们?

  3. 这是什么目的backbone.js路由器类,因为你使用node.js路由器的东西?

  4. 为什么你使用这个架构,而不是像我之前描述的那样更干净?

非常感谢你的帮助

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

答:基本上,第一步是在express.js中configurationviews目录和模板引擎:

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

B.在此之后,我们要find我们所有静态资源的中间件。 当我们谈论“静态”资源时,我们会讨论将在前端执行的图像,JavaScript,html,css等:

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

如果express(或connect)在/ public目录中findindex.html,它将运行它。 如果不是,则必须通过快速路由系统创build路由。

C.我们是在express.js从后端检查HTML的情况下。 为此,正如我写的,我们需要一个路由系统,如:

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

在这里,当express.js检测到用户访问主页面“/”时,它会查找位于/ views目录和index.js文件的父目录(不是/ public),并将从这里index.jade将被渲染并被扫描到前端:

  res.render('index'); 

D. index.jade将提供所需的资源。 在我们的例子中,将提供这个.jade,库(jquery,backbone等)所需要的CSS,最后是backbone.js将要求的两个元素:

  1. 将加载backbone.js前端的JavaScript文件。 在这里,所有文件将位于/ public目录中:

      script(src='/views/index.js') 
  2. index.jade也将提供backbone.js视图所需的模板:

      script(type='text/template', id='login') 

E.有几个不同的backbone.jsconfiguration。 通常情况下,您从前端路由器启动主应用程序,在该路由器中初始化所有对象。 但是同步index.jade文件,模板和执行javescript视图的主要思想是在DOM加载完成后执行最后一个。 出于这个原因,最好的想法是使用下面的jquery语句:

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

也许有些人会觉得这个摘要是不必要的,但对于那些不知道前端所有东西有什么区别的混蛋,或者是混合HTML node.js后端+ backbone.js前端,我认为会有用的。 最重要的是,结构如何。 也许这听起来很疯狂,但是互联网上没有任何信息可以解释如何构build它。

最好的祝福

我没有足够的代表评论你的答案迈克尔,所以我必须把它放在这里,对不起。

无论如何,你的结果文件夹结构如下所示:

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

我在这里find的