Node JS + Express:在主视图中渲染子视图

我有一个“Google Card”devise的页面。 我想在这个主页的卡片上渲染一些视图。

卡界面如下所示: 在这里输入图像说明

因为可以有很多卡,我组织了我的项目模块。

(顺便说一下,如果你知道一个比Express更适合我的项目的框架,你可以告诉我吗?))

我正在使用Express Framework的Node.js。 我的目录结构是这样的:

|-app |--modules |---weather |---index.js |----views |-----weather.jade |--views |--config.js |--server.js |-public |--assets |---img |---css |---... 

这是我目前的一些代码:

server.js:

 var express = require('express'); var app = express(); app.use("/public", express.static(__dirname + '/../public')); app.set('view engine', 'jade'); Board = {}; Board.modules = {}; Board.modules.weather = require('./modules/weather'); app.use(Board.modules.sticks); app.get('/', function(req,res){ tpl = {}; tpl.modules = Board.modules; console.log(tpl); res.render(__dirname + '/views/board.jade', tpl); }); app.listen(8080); 

board.jade(主页)

 doctype html html(lang="fr") head meta(charset="utf-8") title Board block stylesheets link(rel="stylesheet", href="/public/assets/css/reset.css") link(rel="stylesheet", href="/public/assets/css/board.css") body // Background div.bg // Header header.topinfo span.left.ip | 192.168.31.11 span.center.logo span.logo span.logo-baseline span.right.time | 13:37 // Modules ul each val in modules li= val block scripts script(src="/public/assets/bower_components/jquery/dist/jquery.min.js") script(src="/public/assets/lib/jquery-taphold/taphold.js") script(src="/public/assets/lib/background-check/background-check.min.js") script(src="/public/assets/bower_components/masonry/dist/masonry.pkgd.min.js") script(src="/public/assets/js/app.js") 

和模块/天气/ index.js

 var express = require('express'); var app = module.exports = express(); app.get('/', function(req,res){ res.render(__dirname + '/views/sticks.jade'); }); 

我认为目的就像获取modules / weather / index.js的app.get('/')的结果,但不调用路由,将渲染的结果插入主视图后,但我不知道如何保持我的代码模块化…

首先,将您的主应用程序传递到您的模块,不要创build2个快速应用程序,您可以使用路线来处理其他应用程序。

你应该创build一个小的API并使用AJAX调用来填充你的主视图:

在服务器端:

 app.get('/weather', function(req,res){ res.render(__dirname + '/views/sticks.jade'); }); 

客户玉:

 div#weather 

客户端JS(使用jQuery):

 $.ajax({ url: '/weather', type: 'get', success: function(view) { $('#weather').html(view); } }); 

@xShirase

首先,将您的主应用程序传递到您的模块,不要创build2个快速应用程序

据我所知,节点中的模块被caching,这意味着,当你需要在子文件中expression时,你实际上得到了和主app.js / server.js中一样的实例。 所以通过应用程序不会改善任何东西,但艾莫使得它有点丑陋。