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

时间:2014-10-05 01:15:26

标签: javascript node.js express pug

我有一个设计为“Google Card”的页面。我想在这个主页的卡片上呈现一些视图。

卡片界面如下所示: enter image description here

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

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

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

|-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")

模块/ 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 个答案:

答案 0 :(得分:2)

首先,将您的主应用程序传递给您的模块,不要创建2个快速应用程序,您可以使用路径处理其余的应用程序。

您应该创建一个小API并使用AJAX调用来填充主视图:

在服务器端:

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

客户玉:

div#weather

Client JS(使用jQuery):

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

答案 1 :(得分:0)

@xShirase

  

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

据我所知,节点中的模块是缓存的,这意味着当你需要在子文件中表达时,你实际上得到的主要实例与主app.js / server.js完全相同。所以通过应用程序并没有改善任何东西,但imo使它变得有点丑陋。