我有一个页面是“Google Card”设计的。我想在此主页的卡片上呈现一些 View 。
卡片界面如下所示:
因为可以有很多卡片,所以我将我的项目组织成模块。
(顺便说一句,如果你知道一个框架比 Express 更适合我的项目,你能告诉我吗?:))
我将 Node.js 与 Express 框架结合使用。我的目录结构是这样的:
|-app
|--modules
|---weather
|---index.js
|----views
|-----weather.jade
|--views
|--config.js
|--server.js
|-public
|--assets
|---img
|---css
|---...
这是我当前的一些代码:
服务器.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")
还有 modules/weather/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('/') 的结果,但不调用路由,然后将渲染结果插入主视图,但我不知道如何保持代码的模块化......
最佳答案
首先,将您的主应用传递给您的模块,不要创建 2 个 express 应用,您可以使用路由处理其余的。
您应该创建一个小型 API 并使用 AJAX 调用来填充您的主视图:
在服务器端:
app.get('/weather', function(req,res){
res.render(__dirname + '/views/sticks.jade');
});
客户 Jade :
div#weather
客户端 JS(使用 jQuery):
$.ajax({ url: '/weather',
type: 'get',
success: function(view) {
$('#weather').html(view);
}
});
关于javascript - Node JS + Express : Render subviews in a main view,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26198680/