CODEWITHSUNDEEP
javascriptnode.jsexpresspug
maxime
maxime

Reputation: 2315

Node JS + Express : Render subviews in a main view

I've got a page which is "Google Card" designed. I want to render some views on the cards of this main page.

The Cards interface looks like this: enter image description here

Because there can be many cards, I organized my project in modules.

(BTW, if you know a framework thats fits more my project than Express does, can you tell it to me? :) )

I'm using Node.js with the Express Framework. My directory structures is this:

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

Here is some of my current code:

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 (the main page)

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

And the modules/weather/index.js

var express = require('express');

var app = module.exports = express();

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

I think the purpose would be like getting the result of the app.get('/') of modules/weather/index.js, but without calling the route, to after insert the result of the rendering into the main view, but I don't know how to do that keeping the modularity of my code...

Upvotes: 3

Views: 1508

Answers (2)

jalooc
jalooc

Reputation: 1227

@xShirase

First, pass your main app to your modules, don't create 2 express apps

As far as I know, modules in node are cached, meaning, that when you require express in sub-files, you actually get exactly the same instance as in the main app.js/server.js. So passing app doesn't improve anything, but imo makes it a tiny bit uglier.

Upvotes: 0

xShirase
xShirase

Reputation: 12389

First, pass your main app to your modules, don't create 2 express apps, you can handle the rest using routes.

You should create a small API and use AJAX calls to fill up your main view :

On the server side :

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

Client jade:

div#weather

Client JS (using jQuery):

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

Upvotes: 2

Related Questions